8uh.ru - это информационный портал в стиле "Подслушано". Обсуждаем важные новости мира и интернета, показываем тонкости работы с различными сайтами и социальными сетями: от сайтов поисковых систем Яндекс, Гугл, Мэйл, Рамблер, Нигма до соцсетей Вконтакте, Одноклассники, Твиттер и Пинтерест. Подсказываем как грамотно сделать сайт и получить на него посетителей, используя различные способы продвижения сайтов: SEO-продвижение, краунд-маркетинг, соцсигналы, SMM-маркетинг и SMO-маркетинг.

Настройка плагина Elevate Zoom для OpenCart 2

По просьбам трудящихся — статья с настройками плагина Elevate Zoom. В прошлой статье настройки были рассмотрены поверхностно, из-за чего возникло не мало вопросов по этому поводу. Давайте рассмотрим то, как можно настроить этот замечательный плагин для увеличения картинок на сайте под управлением OpenCart (OcStore) 2. Всего может быть 13 видов настройки, рассмотрим некоторые из них и покажем как происходит сама настройка.

Типы настроек Elevate Zoom

1. Стандартный зум
По-умолчанию, плагин можно настроить так:

HTML

JAVASCRIPT

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

variant-nastroek-image-zoom-opencart-1

2. Зум с оттенком на изображении
Настройка будет такая:

HTML

JAVASCRIPT

Так картинка будет увеличена в отдельном окне, а на обычной картинке будет выполнено затемнение. Этому затемнению можно задать прозрачность (tintOpacity:0.5) и цвет прозрачной заливки tintColour:’#f90′.

variant-nastroek-image-zoom-opencart-2

3. Зум в виде линзы
При наведении на картинку появляется увеличивающая линза-круг. Настройки:

HTML

JAVASCRIPT

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

variant-nastroek-image-zoom-opencart-3

Это не все типы, но в пределах статьи хватит и указанных. Более подробную информацию вы можете получить на официальном сайте , который указан в статье Увеличение картинки Opencart (OcStore).

Все доступные конфигурации плагина Image ZOOM

Плагин можно сконфигурировать как душе угодно, вот все его конфигурации:

Конфигурация По-умолчанию Описание
responsive false Установите значение True, чтобы активировать адаптивность. Если у вас есть тема, которая изменяет размер, или таблетки, которые меняют ориентацию это необходимо. Возможные значения: «True», «False»
scrollZoom false Установите значение True, чтобы активировать масштабирование прокруткой колесом мыши. Возможные значения:»True», «False»
imageCrossfade false Установите значение True, чтобы активировать одновременное плавное увеличение изображений в галерее. Возможные значения: «True»,»False»
loadingIcon false Значение — URL-адрес значка счетчика активации, например, http://www.example.com/spinner.gif. Возможные Значения: «True», «False»
easing false Установите значение True, чтобы активировать смягчения. Возможные значения:»True», «False»
easingType zoomdefault Тип послабления по умолчанию, (t==d) ? b+c : c * (-Math.pow(2, -10 * t/d) + 1) + b
easingDuration 2000
lensSize 200 Размер линзы
zoomWindowWidth 400 Ширина окна увеличения
zoomWindowHeight 400 Высота окна увеличения
zoomWindowOffetx 0 Сдвиг окна увеличения по оси Х
zoomWindowOffety 0 Сдвиг окна увеличения по оси У
zoomWindowPosition 1 После размещения и использования zoomWindowOffsetx и zoomWindowOffsety использовать для регулировки.
Возможные значения: 1-16
lensFadeIn false Скорость появления
lensFadeOut false Скорость закрытия
zoomWindowFadeIn false Скорость появления окна
zoomWindowFadeOut false Скорость закрытия окна увеличения
zoomTintFadeIn false Скорость появления оттенка
zoomTintFadeOut false Скорость исчезновения оттенка
borderSize 4 Толщина границы окна увеличения
zoomLens true Во сколько раз увеличивает линза
borderColour #888 Цвет границы
lensBorder 1 Толщина границы лизны
lensShape square Также может быть круг (обратите внимание, что только современные браузеры поддерживают раунд, по умолчанию будет квадрат в старых браузерах)
zoomType window Возможные Значения: линза, окно и внутреннее увеличение, т.е.: Lens, Window, Inner
containLensZoom false Для использования с типом объектива линза. Это гарантирует, что объектив не выходит за рамки изображения
lensColour white Цвет фона линзы
lensOpacity 0.4 Прозрачность цвета фона линзы
lenszoom false
tint false Включение и выключение оттенка
tintColour #333 Цвет оттенка
tintOpacity 0.4 Прозрачность оттенка
gallery null Использовать увеличение для галереи изображений?
cursor default Тип курсора. Можно указать pointer и так далее. Это в HTML.

Куда вносить настройки плагина

Отлично, все возможные конфигурации и несколько типов настройки мы рассмотрели, но где они делаются в самом дополнении для OpenCart 2? Вы, наверное огорчитесь, но в панели сайта после установки данного плагина-дополнения никаких настроек нет. Всё делается другим путём. Для начала следует определиться с тем, какой тип увеличения вы хотите видеть на своём сайте.

Затем, скачиваете расширение по ссылке.

Перемещаете на рабочий стол, распаковываете и находите файл install.xml.

Открываете файл install.xml для редактирования. Для этих целей подойдёт блокнот или NotePad — самые распространённые программы под Windows. В этом файле вы увидите следующее:

fail-install-opencart-image-zoom

Здесь нужно удалить надпись position=»before» — она лишняя, а затем, вместо:

указать настройки, которые вы хотите.

Допустим, указав здесь:

мы получим тип увеличения — линза, адаптивность, и увеличение прокруткой колёсиком мышки. Так что вариантов настройки масса. После внесения изменений — сохраняете файл под тем же именем, архивируете всё обратно и устанавливаете через административную панель OpenCart. Не забудьте на странице установленных дополнений нажать на кнопку «Обновить», как после установки, так и после удаления. Успехов!

Рассказать о подслушанном:

Комментарии

Комментариев: 7, к записи: “Настройка плагина Elevate Zoom для OpenCart 2
  • Нет аватара
    Владимир пишет:

    Все сделал по инструкции — никаких изменений. В чем может быть проблема? Уже и руками решил все прописать — результат тот же(

    Ответить
    • Нет аватара
      Глава 8-ми ушей пишет:

      может версия не подходит? Для OCMOD 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 вы можете скачать мою версию по ссылке https://yadi.sk/d/CZK_3JKBsPoBw. Прежде чем установить, удалите старое установленное расширение и обновите кэш (системы, картинок и дополнений). Устанавливайте стандартным способом. После установки — включите это дополнение и перейдите в товар. На картинке с товаром должна быть линза…. отпишитесь потом)

      Ответить
  • Нет аватара
    Екатерина пишет:

    Вот я тоже по инструкции делаю, плагин работает, но почему-то те изменения, которые мы указывает в файле инсталл перед установкой, не работают, т.е ни вид зума, ни тип курсора, не меняется.

    Ответить
    • Нет аватара
      Глава 8-ми ушей пишет:

      Екатерина! Напишите, какие настройки вы хотите сделать — вечером отправим вам готовый файл. Примерно, после 7 мск.

      Ответить
  • Нет аватара
    Екатерина пишет:

    Хм, хочу вот так: $(document).ready(function(){$(«#zoom_05″).elevateZoom({zoomType:»inner»,cursor:»crosshair»,responsive:»true»})});, а работает как по умолчанию: $(document).ready(function(){$(«#zoom_01»).elevateZoom();, может там где-то стили прописываются, или мои стили перекрывают. Пробовала и с оф.сайта полный скрипт подгружать, и вручную все прописывать в product.tpl, видимо руки не оттуда растут=)

    Ответить
    • Нет аватара
      Глава 8-ми ушей пишет:

      Хм, всё вроде верно написано. Проверьте ковычки, например, у #zoom_05 не правильно поставлены — может просто не верно скопировалось, но всё же. Кроме того, изображению должен быть прописан ID соответствующий. Это всё верно сделано? Кэш обновляли?

      Ответить
  • Нет аватара
    Екатерина пишет:

    Хм, не знаю почему, но если указать в обоих случаях вместо #zoom_05 —> #zoom_01 работает, правда, изображение вписывается в прямоугольник, но это я полагаю установки размера большого изображения в настройках опенкарта.

    Ответить

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

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