.
top
logo
Воскресенье, 24 Сентября 2017 года

Популярная услуга

Оптимизация сайта в Одессе

Услуги

Объявления


Hosting Ukraine

Главная Учебник WebAsyst Эффект лупы для изображений в каталоге товаров Shop-Script
Эффект лупы для изображений в каталоге товаров Shop-Script PDF Печать E-mail

Используя 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">

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

 

Это полезно знать


bottom
top

Последние статьи

Способы оплаты

Поиск по сайту

Пожертвования


Пожертвовать

Точные апдейты Яндекса и Google


bottom

Создание сайта в Украине BisnesLuck! Заказать сайт по телефону Установить интернет магазин аренда магазина
Яндекс.Метрика