Чат сообщества
   | |
| Модератор форума: Yuri_G |
| Сообщество uCoz Модули uCoz Интернет-магазин Как увеличить фото товара в отдельном окне? |
| Как увеличить фото товара в отдельном окне? |
|
Добрый день. Ситуацию следующая. Есть интернет магазин, в котором товары представлены в виде фотографий, всё бы ничего, да только фотографии в интернет-магазине при нажатии на них отображаются небольшими 500*375 px, хотя по факту загружаемые фото с компьютера размером 2000*1500. В этом и проблема. Небольшие фотографии не отражают всю прелесть товара и как вариант спасло бы положение следующее решение: что бы при наведении на фото, появлялось с боку от изображения окно размером так же 500*375 только с оригинальным масштабом фото, то бишь более крупным, и при манипулировании курсором мыши по небольшому изображению 500*375 в окне с оригиналом менялось положение, подобное решение реализовано на большинстве качественных интернет-магазинах.
Сам я осилить такие вещи к сожалению не могу, но знаю примерно где копать, а именно, в настройках дизайна "страница товара", я так понимаю необходим правка строк: <div class="shop-imgs with-clear"> <?if($PHOTO$)?><img alt="" src="$THUMB$" class="gphoto" onclick="_bldCont1($ID$, this.getAttribute('idx'));" idx="0" title="Кликните для увеличения изображения"><?endif?> <?if($PHOTO_1$)?><img alt="" src="$THUMB_1$" class="gphoto" onclick="_bldCont1($ID$, this.getAttribute('idx'));" idx="1" title="Кликните для увеличения изображения"><?endif?> <?if($PHOTO_2$)?><img alt="" src="$THUMB_2$" class="gphoto" onclick="_bldCont1($ID$, this.getAttribute('idx'));" idx="2" title="Кликните для увеличения изображения"><?endif?> <?if($PHOTO_3$)?><img alt="" src="$THUMB_3$" class="gphoto" onclick="_bldCont1($ID$, this.getAttribute('idx'));" idx="3" title="Кликните для увеличения изображения"><?endif?> <?if($PHOTO_4$)?><img alt="" src="$THUMB_4$" class="gphoto" onclick="_bldCont1($ID$, this.getAttribute('idx'));" idx="4" title="Кликните для увеличения изображения"><?endif?> <?if($PHOTO_5$)?><img alt="" src="$THUMB_5$" class="gphoto" onclick="_bldCont1($ID$, this.getAttribute('idx'));" idx="5" title="Кликните для увеличения изображения"><?endif?> <?if($PHOTO_6$)?><img alt="" src="$THUMB_6$" class="gphoto" onclick="_bldCont1($ID$, this.getAttribute('idx'));" idx="6" title="Кликните для увеличения изображения"><?endif?> <?if($PHOTO_7$)?><img alt="" src="$THUMB_7$" class="gphoto" onclick="_bldCont1($ID$, this.getAttribute('idx'));" idx="7" title="Кликните для увеличения изображения"><?endif?> <?if($PHOTO_8$)?><img alt="" src="$THUMB_8$" class="gphoto" onclick="_bldCont1($ID$, this.getAttribute('idx'));" idx="8" title="Кликните для увеличения изображения"><?endif?> <?if($PHOTO_9$)?><img alt="" src="$THUMB_9$" class="gphoto" onclick="_bldCont1($ID$, this.getAttribute('idx'));" idx="9" title="Кликните для увеличения изображения"><?endif?> </div> Подскажите пожалуйста, что править? |
|
ситуация не изменилась, картинка по прежнему маленького разрешения. как быть?
|
|
Цитата Administrator3473 (  )что бы при наведении на фото, появлялось с боку от изображения окно размером так же 500*375 только с оригинальным масштабом фото, то бишь более крупным, и при манипулировании курсором мыши по небольшому изображению 500*375 в окне с оригиналом менялось положение, подобное решение реализовано на большинстве качественных интернет-магазинах. Это скажем так называется лупа, в инете посмотрите там есть варианты |
|
Нашел в интернете следующую информацию:
HTMLИтак, начинаем. Для начала посмотрим HTML код. Здесь все стандартно — подключаем jQuery, файл плагина и делаем разметку для картинки: Код <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251" /> <title>Лупа на jQuery</title> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="jquery.magnify-1.0.2.js"></script> <style> img { border: 1px solid #CCC; } </style> </head> <body> <h1>Лондонское метро</h1> <p>Карта лондонского метро довольно большая. Но теперь у нас есть лупа ;-)</p> <h3>Дефолтные настройки</h3> <p><a href="walkmap.gif" id="magnify1"><img src="walkmap_small.gif" /></a></p> <h3>Немного модифицированные настройки</h3><p><a href="walkmap.gif" id="magnify2"><img src="walkmap_small.gif" /></a></p> </body> </html> Код <script type="text/javascript"> $("#magnify1").magnify(); </script> вот. как мне это внедрить для своей ситуации, что на что заменить в этом коде: Код <div class="shop-imgs with-clear"> <?if($PHOTO$)?><img alt="" src="$THUMB$" class="gphoto" onclick="_bldCont1($ID$, this.getAttribute('idx'));" idx="0" title="Кликните для увеличения изображения"><?endif?> <?if($PHOTO_1$)?><img alt="" src="$THUMB_1$" class="gphoto" onclick="_bldCont1($ID$, this.getAttribute('idx'));" idx="1" title="Кликните для увеличения изображения"><?endif?> <?if($PHOTO_2$)?><img alt="" src="$THUMB_2$" class="gphoto" onclick="_bldCont1($ID$, this.getAttribute('idx'));" idx="2" title="Кликните для увеличения изображения"><?endif?> <?if($PHOTO_3$)?><img alt="" src="$THUMB_3$" class="gphoto" onclick="_bldCont1($ID$, this.getAttribute('idx'));" idx="3" title="Кликните для увеличения изображения"><?endif?> <?if($PHOTO_4$)?><img alt="" src="$THUMB_4$" class="gphoto" onclick="_bldCont1($ID$, this.getAttribute('idx'));" idx="4" title="Кликните для увеличения изображения"><?endif?> <?if($PHOTO_5$)?><img alt="" src="$THUMB_5$" class="gphoto" onclick="_bldCont1($ID$, this.getAttribute('idx'));" idx="5" title="Кликните для увеличения изображения"><?endif?> <?if($PHOTO_6$)?><img alt="" src="$THUMB_6$" class="gphoto" onclick="_bldCont1($ID$, this.getAttribute('idx'));" idx="6" title="Кликните для увеличения изображения"><?endif?> <?if($PHOTO_7$)?><img alt="" src="$THUMB_7$" class="gphoto" onclick="_bldCont1($ID$, this.getAttribute('idx'));" idx="7" title="Кликните для увеличения изображения"><?endif?> <?if($PHOTO_8$)?><img alt="" src="$THUMB_8$" class="gphoto" onclick="_bldCont1($ID$, this.getAttribute('idx'));" idx="8" title="Кликните для увеличения изображения"><?endif?> <?if($PHOTO_9$)?><img alt="" src="$THUMB_9$" class="gphoto" onclick="_bldCont1($ID$, this.getAttribute('idx'));" idx="9" title="Кликните для увеличения изображения"><?endif?> </div> Добавлено (26 Апр 2014, 12:20:23) Сообщение отредактировал Administrator3473 - Суббота, 26 Апр 2014, 12:16:50
|
|
Administrator3473,
после <body> Код <script type="text/javascript" src="/easyzoom.js"></script> <script type="text/javascript"> jQuery(function($){ $('a.zoom').easyZoom(); };); </script> <style> #easy_zoom{ width:600px; height:400px; border:5px solid #eee; background:#fff; color:#333; position:absolute; top:20%; left:55%; z-index:10; overflow:hidden; -moz-box-shadow:0 0 10px #777; -webkit-box-shadow:0 0 10px #777; box-shadow:0 0 10px #777; /* vertical and horizontal alignment used for preloader text */ line-height:400px; text-align:center; } </style> Далее Код <a href="$PHOTO$" class="zoom"> <img alt="" src="$THUMB$" class="ip-mainphoto" onclick="_bldCont1($ID$, this.getAttribute('idx'));" id="ipreview" idx="0" title="Кликните для увеличения изображения"> </a> <?if($SMALL$)?><img alt="" style="display:none" src="$SMALL$" class="ip-photo fp" onclick="var el=getElementById('ipreview'); el.src='$THUMB$'; el.setAttribute('idx',0);$('.zoom').attr('href','$PHOTO$');$('a.zoom').easyZoom();$('.fp').hide();"><?endif?> $SMALL1$ $SMALL2$ и т.д Сообщение отредактировал shatrov - Суббота, 26 Апр 2014, 12:52:19
|
|
Благодарю
 , буду сейчас экспериментировать |
|
Прошу прощения за назойливость, но у меня видимо фото товаров на сервер загружается уже уменьшенные, максимальный размер которых 500*375. в загрузчике изображений ограничений нет, куда копать?
|
|
там вроде всё в норме:
 |
|
shatrov,
Код <script type="text/javascript" src="/easyzoom.js"></script> |
|
Проблема актуальна
Добавлено (26 Апр 2014, 20:46:42) Добавлено (26 Апр 2014, 21:10:03) Добавлено (26 Апр 2014, 23:11:23) |
|
фото перезаливал, THUMB на PHOTO менял
|
| |||
Будьте в курсе всех обновлений: подпишитесь на наш официальный Telegram-канал uCoz и задавайте вопросы в чате сообщества!