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

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



cloud-zoom
Для начала понадобится библиотека JQuery и плагин Cloud Zoom, скачать их можно здесь.
После того, как архив с файлами будет распакован в корень движка, можно начинать редактирование необходимых файлов.
Всего надо будет править 2 файла, это /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">

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