Главная » Opencart » Создаем Zoom эффект для изображений внутри карточки товара на Opencart

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

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

1339821468.jqzoom-product-screenshot-2-500x500

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

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

Для того, чтобы модуль работал на вашем ресурсе у вас должен быть установлен vQmod. Как его установить я напишу в следующих уроках, если ждать не хочется можно поискать в интернете, инфы по этой теме очень много. Вот кстати набросал статью по установке 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’ или в числовом эквиваленте.

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

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

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

10 комментариев

  1. А как этот плагин подключить к другой теме? у меня на сторонней теме он не работает

  2. Я так по памяти не помню, но походу Вам нужно отредактировать файл — vqmod/xml/rcn_jqzoom_product.xml. Там есть путь к файлу, который корректируется vqmod, впишите вместо default название Вашей темы.

  3. А как и где выставить значение z-index всплывающего окна просмотра.? А то у меня опцыи размера по верх всплывающего окна.

  4. Владими, задайте в css, можете поставить !important.

  5. Добрый день, подскажите будет ли работать на версии 1.5.6.1

  6. Екатерина, я сейчас пользуюсь бесплатным модулем — Cloud Zoom Free OpenCart Product Image Zoom. Разработчики указывают что он будет работать с Вашей версией движка.

  7. Скажите, если при просмотре увеличения мы кликаем на фото мышкой, сплывает ли полное фото товара с возможностью листания вперед-назад? если возможность такое реализовать в этом плагине?

  8. Grek, насколько я помню там нет такой возможности.

  9. «Подписывайтесь на мой блог». А где?

  10. jenya, уже добавил форму, раньше был смартреспондер.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *