Эффект лупы для изображений в каталоге товаров WA Shop-Script 300-309

13 апреля 2012

Используя JQuery плагин "Cloud Zoom" на страницах вашего сайта, можно организовать увеличения изображения с эффектом лупы. При наведении курсора мыши на миниатюру изображения, будет загружена увеличенная версия изображения с возможностью скролинга при перемещении курсора мыши, создавая таким образом эффект увеличения. Далее в статье пойдет речь, как установить данный плагин на движок Shop-Script 309.


Для начала понадобится библиотека JQuery и плагин Cloud Zoom, .
После того, как архив с файлами будет распакован в корень движка, можно начинать редактирование необходимых файлов.
Всего нужно будет править 2 файла, это /published/SC/html/scripts/repo_themes/[ваша тема]/head.html (либо, если тема была изменена /published/publicdata/[ключ вашей БД]/attachments/SC/themes/[ваша тема]/head.html) и /published/SC/html/scripts/templates/frontend/product_brief.html.
В файл head.html добавим строки:

<link rel="stylesheet" href="{$smarty.const.URL_CSS}/cloud-zoom.css" type="text/css">
<script type="text/javascript" src="{$smarty.const.URL_JS}/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="{$smarty.const.URL_JS}/cloud-zoom.1.0.2.min.js"></script>

Напомню, что файл head.html можно редактировать прямо в редакторе дизайна, админки магазина.
Отредактируем код в файле product_brief.html, строка 21 начинается с комментария <!-- Thumbnail -->, за ним идет ссылка которую необходимо изменить, на такую:

<a class ="cloud-zoom" href="{$smarty.const.URL_PRODUCTS_PICTURES}/{$product_info.big_picture|escape:'url'}" rel="position: 'inside' , showTitle: false, adjustX:-4, adjustY:-4">

Обратите внимание, что меняются только атрибуты, тело ссылки остается прежним.
На этом интеграция завершена.

Оффсайт плагина.
По заявлению разработчиков, поддерживается работа в следующих браузерах: IE6+, Firefox, Chrome, Opera, Safari.
UPD: 27-08-2012

Обратите внимание

Данная доработка создана только для WebAsyst Shop-Script версий 300-309, в Shop-Script 5 она работать не будет.

Поделиться: Добавить в Facebook Добавить в Вконтакте Добавить в ЖЖ Добавить в Twitter