Image Zoom - Увеличение картинки v0.2

Image Zoom - Увеличение картинки

  1. admin
    По умолчанию, в Опенкарт увеличение картинки при просмотре карточки товара не предусмотрено. Возможен только просмотр увеличенного изображения при клике на изображение товара, при этом размер увеличенного изображения задаётся в административной части вашего интернет-магазина на 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-lens.jpg

    Гораздо более просто и удобный способ — это использование плагина Image Zoom Opencart, работающего на Elevate

    Установка Image Zoom Opencart 2
    Скачайте файл с модулем, приведённой выше и установите с помощью меню: «Дополнения» — «Установка дополнений».
    ustanovka-image-zoom.jpg

    Характеристики Elevate Zoom плагина
    Jquery Plugin Image Zoom плагин обладает следующими характеристиками:
    • Полностью Настраиваемый
    • Цветные оттенки
    • Поддержка FancyBox галереи
    • Переменное масштабирование на прокрутки мыши
    • Внешние элементы управления
    • Окно Zoom, зум-объектив и внутренний увеличитель
    • Бесплатное использование под MIT и GPL лицензии
    uvelichenie-kartinki-opencart.jpg

    Кроме того, плагин адаптивный — специальная опция позволяет включить использование адаптивности при увеличении картинки.

    Параметры конфигурации Jquery Plugin Image Zoom Opencart
    Доступны следующие варианты для увеличения:
    • responsive — по-умолчанию стоит «False». Установите «True» для активации адаптивности.
    • scrollZoom — по-умолчанию стоит «False». Установите «True» для активации зума при прокрутки колёсика мыши.
    • imageCrossfade — по-умолчанию стоит «False». Установите «True», чтобы активировать одновременную склейку изображений на изменения галереи.
    Настройка установленного модуля увеличения изображений Опенкарт
    После установки данного расширения, необходимо выполнить его настройки. Для этого следует открыть для редактирования файл: /system/storage/modification/catalog/view/theme/default/template/common/footer.tpl.

    Внизу файла footer.tpl вы увидите:
    Код:
    <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(){varo=$(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>
    Вместо этого можно вписать:
    Код:
    <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>
    При такой настройке при наведении на изображение товара будет показываться его увеличенный вариант, при этом изображение будет адаптироваться под размеры экрана и при прокрутке колёсика мышки — дополнительно масштабироваться.

    Если у вас возникнут сложности с установкой и настройкой Image Zoom Opencart — обращайтесь в комментарии. Мы вам поможем!)
    Jack1970, linch2005, badereshtaya1 и 116 другим нравится это.