Вход





Забыли пароль?

Создаем Zoom эффект для изображений

В этой статье мы расскажим как сделать визуальный эффект увеличения картинок в карточке товара. Как он выглядит, вы можете увидеть на фото ниже.

Такой визуальный эффект используется во многих современных шаблонах для opencart. Я стараюсь предоставлять вам наиболее простые в реализации решения для осуществления различных задач.

БЕСПЛАТНЫЙ модуль для Opencart, который позволит  реализовать такой функционал. Называется он — jQZoom Product Page.  Скачать его можно – вот здесь.Для того, чтобы модуль работал на вашем ресурсе у вас должен быть установлен vQmod. 

Итак, вы скачали архив и распаковали его. Заливаем файлы из папки upload на сервер. Не беспокойтесь, файлы движка перезаписаны не будут. После загрузи можно идти на сайт и проверять работоспособность модуля.

Иногда вебмастерам нужно немного подкорректировать внешний вид или эффекти используемые модулями. Что подправить данный модуль нужно открыть файл — «vqmod/xml/rcn_jqzoom_product.xml«.

После чего найти в нем вот этот код:

<script type="text/javascript">
    $(document).ready(function() {
      $('.jqzoom').jqzoom({
        zoomType: 'standard',
        lens:true,
        preloadImages: false,
        alwaysOn:false,
        xOffset: 20,
        yOffset: -10,
        zoomWidth: 330,
        zoomHeight: 350
      });
    });
    </script>

Вы можете подправить нужные вам параметры, например ширину и высоту всплывающего окна.

Вот полный список настраиваемых параметров модуля jQZoom Product Page.

Опция Значение по умолчанию Описание
zoomType  ‘standard’  Другие варианты значений ‘reverse’,’drag’,’innerzoom’.
zoomWidth  300  Ширина всплывающего окна
zoomHeight  300  Высота всплывающего окна
xOffset  10  Смещение всплывающего окна относительно основного изображения по координате x
yOffset  0   Смещение всплывающего окна относительно основного изображения по координате y
position  right’  Позиция всплывающего окна, значения: ‘right’ ,’left’ ,’top’ ,’bottom’.
preloadImages  true  Если установлено в «true», то будет загружено всплывающее окно.
preloadText  ‘Loading zoom’  Если установлено в «true», то будет загружен текст описания.
title  true  Отображения тайтла картинки.
lens  true  Отображения эффекта линзы.
imageOpacity  0.4  Значение прозрачности изображения.
 showEffect  ‘show’  Эффект появления, значения: ‘show’ ,’fadein’.
 hideEffect  ‘hide’  Эффект исчезания, значения: ‘hide’ ,’fadeout’.
 fadeinSpeed  ‘slow’  При установке значения эффекта появления — fadein, вы можете в этом параметре указать скорость появления. Значения: ‘fast’,’slow’ или в числовом эквиваленте.
 fadeoutSpeed  ‘2000’  При установке значения эффекта исчезновения-  fadeout, вы можете в этом параметре указать скорость появления. Значения: ‘fast’,’slow’ или в числовом эквиваленте.

Для того чтобы регулировать размер изображений в карточке товара вам нужно зайти в раздел «Система» — «Настройки». В правой стороне нажать «Изменить» и перейти во вкладку изображения.

Там выставите те значения, которые вам нужны.