По умолчанию, в Опенкарт увеличение картинки при просмотре карточки товара не предусмотрено. Возможен только просмотр увеличенного изображения при клике на изображение товара, при этом размер увеличенного изображения задаётся в административной части вашего интернет-магазина на Opencart. Сделаем более привлекательным просмотр изображения товара с помощью простого модуля, который идеально подходит для Opencart (OcStore) версии 2.0.0.0, 2.0.1.0, 2.0.1.1, 2.0.2.0, 2.0.3.1, 2.1.0.1, 2.1.0.2, 2.2.0.0 с OCMOD и Opencart (OcStore) версии 2.0.0.0, 2.0.1.0, 2.0.1.1, 2.0.2.0, 2.0.3.1, 2.1.0.1, 2.1.0.2, 2.2.0.0 с VQMOD. Данный модуль использует Elevate Zoom плагин.
Содержание
Image Zoom Opencart
Для Опенарт есть несколько готовых модулей, которые позволяют при просмотре карточки товара увеличивать изображение с товаром. Один из них и самый популярный — Magic Zoom Plus — zoom & enlarge images. Однако данный плагин платный и сильно нагружает сервер, а также увеличивает время загрузки интернет-магазина. Хотя в сети можно найти способы использования Magic Zoom Plus — zoom & enlarge images бесплатно, но другие его недостатки значительно превосходят его достоинства.
Гораздо более просто и удобный способ — это использование плагина Image Zoom Opencart, работающего на Elevate Zoom плагине. Ссылка на официальную страничку модуля: здесь.
Установка Image Zoom Opencart 2
Скачайте файл с модулем по ссылке, приведённой выше и установите с помощью меню: «Дополнения» — «Установка дополнений».
Характеристики Elevate Zoom плагина
Jquery Plugin Image Zoom плагин обладает следующими характеристиками:
- Полностью Настраиваемый
- Цветные оттенки
- Поддержка FancyBox галереи
- Переменное масштабирование на прокрутки мыши
- Внешние элементы управления
- Окно Zoom, зум-объектив и внутренний увеличитель
- Бесплатное использование под MIT и GPL лицензии
Кроме того, плагин адаптивный — специальная опция позволяет включить использование адаптивности при увеличении картинки.
Параметры конфигурации Jquery Plugin Image Zoom Opencart
Доступны следующие варианты для увеличения:
- responsive — по-умолчанию стоит «False». Установите «True» для активации адаптивности.
- scrollZoom — по-умолчанию стоит «False». Установите «True» для активации зума при прокрутки колёсика мыши.
- imageCrossfade — по-умолчанию стоит «False». Установите «True», чтобы активировать одновременную склейку изображений на изменения галереи.
- другие параметры настройки скрипта вы можете найти по ссылке: http://www.elevateweb.co.uk/image-zoom/configuration
Настройка установленного модуля увеличения изображений Опенкарт
После установки данного расширения, необходимо выполнить его настройки. Для этого следует открыть для редактирования файл: /system/storage/modification/catalog/view/theme/default/template/common/footer.tpl.
Внизу файла footer.tpl вы увидите:
|
1 2 3 4 |
<script src="catalog/view/javascript/jquery.elevatezoom.min.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function(){$("#zoom_01").elevateZoom({cursor:"crosshair",zoomWindowFadeIn:500,zoomWindowFadeOut:750,lensFadeIn:500,lensFadeOut:500})}),$(window).on("resize",function(){var o=$(this);$("#zoom_01").elevateZoom(o.width()<900?{cursor:"crosshair",zoomType:"inner",zoomWindowFadeIn:500,zoomWindowFadeOut:750,lensFadeIn:500,lensFadeOut:500}:{cursor:"crosshair",zoomType:"window",zoomWindowFadeIn:500,zoomWindowFadeOut:750,lensFadeIn:500,lensFadeOut:500})}); </script> |
Вместо этого можно вписать:
|
1 2 3 4 |
<script src="catalog/view/javascript/jquery.elevatezoom.min.js" type="text/javascript"></script> <script type="text/javascript"> $("#zoom_01").elevateZoom({ zoomType : "inner", cursor: "crosshair", responsive: "True", scrollZoom: "True" }); </script> |
При такой настройке при наведении на изображение товара будет показываться его увеличенный вариант, при этом изображение будет адаптироваться под размеры экрана и при прокрутке колёсика мышки — дополнительно масштабироваться.
Все возможные варианты настроек вы может увидеть наглядно по ссылке: http://www.elevateweb.co.uk/image-zoom/examples.
Если у вас возникнут сложности с установкой и настройкой Image Zoom Opencart — обращайтесь в комментарии. Мы вам поможем!)
ПРИМЕР РЕАЛИЗАЦИИ (со стандартными настройками) — на нашем тестовом сайте SHADELLE.RU
Добрый день!
Подскажите, как реализовать Gallery & Lightbox
_www.elevateweb.co.uk/image-zoom/examples
На данный момент, главная картинка работает как надо. Дополнительные, открываются сразу в Fancy.
Буду вам признателен!
Здравсвтуйте! Можно попробовать вместо ID=»zoom01″ использовать class=»zoom_id». Затем, для каждого изображения добавить данный класс. Имеется в виду, что добавить данный класс нужно для тех картинок, для которых нужен ЗУМ.
Попробовал, не срабатывает.
Может знаете как сделать скролл дополнительных изображений, с переключением(заменой) главной?
Можно вас попросить удалить ссылку, сайта еще нет в индексе, поспешил)
Подскажите, после установки модуля, он не появился в админке. Точнее в установленных дополнениях он есть, но вот где искать его настройки?
В разделе модули его нет.
Настроек действительно нет. Всё нужно настраивать перед установкой. Т.е. удаляете установленное приложение и вносите все необходимые настройки в установочный файл… Думаю эта тема отдельной статьи) Через пару часов будет)
И не могди быВы показать на скрине где эти настройки? Спасибо.
Добрый день! как настроить Easing зум на опенкарте?
Здравствуйте! Читайте здесь https://8uh.ru/opencart-i-ocstore/nastroyka-plagina-elevate-zoom-dlya-opencart-2.html
и куда вписать
HTML
??
Как установить elevate zoom на последний opencart (2.3) через ocmod? Перед установкой файл переименовал в …ocmod.zip, он даже установился, но в менеджере дополнений в списке установленных его нет
Скажите пожалуйста как установить данный модуль?
Здравствуйте! Читайте в комментариях ниже.
1 почему то, модуль увеличивает миниатюру у которой плохое качество хотелось бы чтобы он подгружал оригинальную фотку в том месте где увеличивает лупа.
2 как настроить увеличение в попап окне, где листаются фотки
Как его поставить в версию 2.3 про ?
Что и куда прописать? Изменить — добавить…