Учебник по созданию сайта
Эффект лупы для изображений в каталоге товаров Shop-Script
Используя JQuery плагин «Cloud Zoom» на страницах вашего сайта, можно организовать увеличения изображения с эффектом лупы. При наведении курсора мыши на миниатюру изображения, будет загружена увеличенная версия изображения с возможностью скролинга при перемещении курсора мыши, создавая таким образом эффект увеличения. Далее в статье пойдет речь, как установить данный плагин на движок Shop-Script.
Для начала понадобится библиотека 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" > |
Обратите внимание, что меняются только атрибуты, тело ссылки остается прежним.
На этом интеграция завершена.