Категории

Увеличение картинки при наведении в списке товаров

Реализуем увеличение картинки при наведении на нее мышки в списке товаров.

Для вывода картинки будем использовать скрипт http://www.vertigo-project.com/projects/vtip

1 - подключение JS
Открыть themes\шаблон\javascript\general.js.php
Ниже

Добавить

Файлы jquery.js и vtip-min.js должны лежать в папке themes/шаблон/javascript
Так же не забудьте поправить при необходимости названия файлов

В style.css вашего шаблона нужно добавить

p#vtip { display: none; position: absolute; padding: 10px; left: 5px; font-size: 0.8em; background-color: white; border: 1px solid #a6c9e2; -moz-border-radius: 5px; -webkit-border-radius: 5px; z-index: 9999 }
p#vtip #vtipArrow { position: absolute; top: -10px; left: 5px }

2 - вывод больших картинок в листинг товаров
тут нам нужно будет редактировать PHP файл.

Открываем \includes\classes\product.php
ищем примерно 394 строку на которой нам нужен код

'PRODUCTS_IMAGE' => @$this->productImage($array['products_image'], $image),

Ниже этого кода добавляем

'PRODUCTS_IMAGE_POPUP' => $this->productImage($array['products_image'], 'popup'),

Где , 'popup'), это тип размера всплывающей картинки.

3 - сам эффект всплывания большой картинки
Тут все просто.
Откроем файл списка товара в стандартном шаблоне default
\themes\default\module\product_listing\product_listing_columns.html

находим в нем картинку товара

И заменим на

<a href="{$module_data.PRODUCTS_LINK}" title="<img src='{$module_data.PRODUCTS_IMAGE_POPUP}' />" class="vtip">
<img src="{$module_data.PRODUCTS_IMAGE}" alt="{$module_data.PRODUCTS_NAME}" title="{$module_data.PRODUCTS_NAME}" />
</a>

мы тут добавили title="<img src='{$module_data.PRODUCTS_IMAGE_POPUP}' />" class="vtip"

Все.
Теперь в списках товаров будет при наведении на картинку товара всплывать ее увеличенная копия.
Если нужно выводить в новиках или еще где-то, то делаем по аналогии. добавляя title и class указанные выше.

не забываем про {$module_data.PRODUCTS_IMAGE}. Где-то может быть не module_data, а product_data.

Всем спасибо. Тема в моем блоге

Спасибо ;)

NeBox красавец! Как всегда порадовал прикольной доработкой. Спасибо.

Вот ссылка www.gadjet-shop.com, все сделал так как написано выше, но картинка не появляется. Может что то пропустил?

Вот ссылка www.gadjet-shop.com, все сделал так как написано выше, но картинка не появляется. Может что то пропустил?

Да вроде все работает :)

в папку images которая в корне магазина положите картинку
vtip_arrow.png

И действительно все работает.

Спасибо, все нормально, просто у меня оказвается браузер тупит. А как можно сделать чтобы в списке товаров была одна картинка а при наведении мышки всплывала другая. Ну то есть в списке товаров картика на которой нарисован сам товар, а при наведении всплывает картинка где допустим этот же товар с разных сторон

NeBox, огромное спасибо!!!

А технически возможно такое сделать на "Ожидаемые товары"?
Наводишь на текстовую строку и появляется thumb.

Да. можно и туда. вообще в любой части. Если удет время, то сделаю.

что-то не получается к шаблону парадайс прикрутить к странички product_info_v1.html

а зачем там такое делать? там же есть увеличение фенсибокса.

у меня увеличивается по клику и открывает новую страницу. очень не удобно.

новую страницу открывает так как ошибки с JS. вы видимо там наподключали, что скрипты конфликтуют.
надо смотреть сайт. в личку ссылку скиньте, если не хотите публично. я гляну.

Что то у меня на клианшопе не работает.
И не понимаю куда прикручивать последний пункс с эффектом. У меня там 3 файла. Ни в одном нет нужной строки.
Но как понимаю картинка должна и без этого появляться.

А вобще можно сделать эффект всплытия не проявлением, а приближением самой картинки.
Другими словами при наведении мышки на картинку, она как бы подъезжает.

У меня там 3 файла.

В каждом ищем

Там вроде все подробно описано.
примерно такие строки

Не обязательно что будет именно такая. Суть именно в том, чтобы найти картинку вместе с ссылкой.

короче получилось, но при изменении последнего ломается стиль шаблона. А как не допустить этого не понимаю пока.

для шаблона cleanshop нужно так

<a href="{$module_data.PRODUCTS_LINK}" title="<img src='{$module_data.PRODUCTS_IMAGE_POPUP}' />" class="vtip"><img class="prod-img" src="{$module_data.PRODUCTS_IMAGE}" alt="{$module_data.PRODUCTS_NAME}" /></a>

Просто шикарно стало! БОЛЬШОЙ РЕСПЕКТ!!

А как сделать тоже самое на новинки(на главной странице)?

аналогично.
вы код сравните из предыдущего сообщения моего и код в новинках. и добавьте изменения.

там добавляется такое
title="<img src='{$module_data.PRODUCTS_IMAGE_POPUP}' />" class="vtip"

естественно, если в ссылке уже есть title="...", то его удалить и вставить который выше.
и добавить class="vtip" в ссылку.

два кусочка кода.
В первом топике все описано. Пробуйте сами решать такие простые задачи. Быстрее разберетесь.

Спасибо, очень полезный скрипт, если бы еще можно было как-то фиксировать размер картинки по ширине и высоте, ну к примеру чтобы была не шире и не длиннее 400 px, а то картинки некоторые большие очень. Или чтобы показывало картинку не popup, а info? такое возможно?

Подскажите как сделать для страницы карточки товара. Запутался с основной и доп. картинками %)

там же есть и так увеличение, зачем там такое делать?
делайте по аналогии как в первом посте. все будет работать.

Доброго всем, подскажите список где могут конфликтовать js скрипты, пока что то не работает ничего .

Могут конфликтовать скрипты, если подключено несколько раз jQuery, как вариант.
Возможно включены плагины social или scrolling.

Спасибо, а можно сделать что бы картинка открывалась не только с одного края о в зависимости от положения, например всегда в центре? И если можно то как это реализовать?

Там сам скрипт не позволяет этого сделать. Нужно искать аналог и его встраивать.

Скрипт работает, но мне нужно, чтобы картинки увеличивались при клике на картинку.
Заменил параметр hover на click или toggle, картинка увеличивается, но при повторном клике просто не хочет закрываться. Не знаю как задать правило, чтобы оно закрывалось. Прошу помощи тех, кто разбирается. Уже часа 4 пытаюсь найти ответ, но ничего не получается. Вот код:

this.vtip=function(){this.xOffset=-10;this.yOffset=10;$(".vtip").unbind().toggle(function(a){this.t=this.title;this.title="";this.top=(a.pageY+yOffset);this.left=(a.pageX+xOffset);$("body").append('<p id="vtip"><img id="vtipArrow" />'+this.t+"</p>");$("p#vtip #vtipArrow").attr("src","images/vtip_arrow.png");$("p#vtip").css("top",this.top+"px").css("left",this.left+"px").fadeIn("slow")},function(){this.title=this.t;$("p#vtip").fadeOut("slow").remove()}).mousemove(function(a){this.top=(a.pageY+yOffset);this.left=(a.pageX+xOffset);$("p#vtip").css("top",this.top+"px").css("left",this.left+"px")})};jQuery(document).ready(function(a){vtip()});

Коль тут говорят про картинки.

{if $PRODUCTS_IMAGE_1 != ''}
<tr>
<td style="border-top: 1px solid; border-color: #cccccc;">
<a href="{$PRODUCTS_POPUP_LINK_1}"><img src="{$PRODUCTS_IMAGE_1}" alt="{$PRODUCTS_NAME}" /><br /><div style="text-align:center;"><img src="{$tpl_path}img/images/zoom.gif" alt="Bild vergrцssern"></div></a>
</td>
</tr>
{/if}
{if $PRODUCTS_IMAGE_2 != ''}
<tr>
<td style="border-top: 1px solid; border-color: #cccccc;">
<a href="{$PRODUCTS_POPUP_LINK_2}"><img src="{$PRODUCTS_IMAGE_2}" alt="{$PRODUCTS_NAME}" /><br /><div style="text-align:center;"><img src="{$tpl_path}img/images/zoom.gif" alt="Bild vergrцssern"></div></a>
</td>
</tr>
{/if}
{if $PRODUCTS_IMAGE_3 != ''}
<tr>
<td style="border-top: 1px solid; border-color: #cccccc;">
<a href="{$PRODUCTS_POPUP_LINK_3}"><img src="{$PRODUCTS_IMAGE_3}" alt="{$PRODUCTS_NAME}" /><br /><div style="text-align:center;"><img src="{$tpl_path}img/images/zoom.gif" alt="Bild vergrцssern"></div></a>
</td>
</tr>
{/if}

Вот код на дополнительные картинки. Их к примеру три. Но код почему-то не работает((
В чем проблема?

Коль тут говорят про картинки.

Вот код на дополнительные картинки. Их к примеру три. Но код почему-то не работает((
В чем проблема?

Вам случайно не вот это нужно реализовать? http://babaychik.ru/

Коль тут говорят про картинки.

Вот код на дополнительные картинки. Их к примеру три. Но код почему-то не работает((
В чем проблема?

А этот код с каково шаблона?

xtc24
По идеи должен работать. Ибо вроде как все переменные в движке генерятся.

{$img_values.PRODUCTS_MO_IMAGE_BLOCK}

не подходит. там весь код генерируется в product_info.php а если втыкать html то начинает ругаться на некоторые символы

Вам случайно не вот это нужно реализовать? http://babaychik.ru/

Именно это и нужно реализовать! Вы не знаете какой код нужно прописать, чтобы прикрутить эту фишку к сайту??

dess81
В шаблоне добавляем 2 строчки

И сцымся от радости :D

З.Ы: надеюсь додумаешься как скрипты перетащить на локалхост!

darkheart нет не это, что-то аналогичное.
Хочу что-бы картинки выводились через скрипт popup_image.php
Центральную картинку сделал, а вот дополнительные не получается, скрипт не сробатывает

Доброго времени суток. Возможно я что-то упустил, но я не нашел тут того что мне нужно.

Вроде в cleanshope есть fencybox. Но он не работает. Из-за чего? Может его нужно как то активировать? Все что я сделал это подключил его в плагинах.

Скажите пожалуйса, установил функцию на шаблон cleanshop, но работает она только когда человек вошел на сайт под своим логином, когда входишь как гость - не работает :(
В чем может быть проблема?

Источник