По просьбам трудящихся — статья с настройками плагина Elevate Zoom. В прошлой статье настройки были рассмотрены поверхностно, из-за чего возникло не мало вопросов по этому поводу. Давайте рассмотрим то, как можно настроить этот замечательный плагин для увеличения картинок на сайте под управлением OpenCart (OcStore) 2. Всего может быть 13 видов настройки, рассмотрим некоторые из них и покажем как происходит сама настройка.
Содержание
Типы настроек Elevate Zoom
1. Стандартный зум
По-умолчанию, плагин можно настроить так:
HTML
|
1 |
<img id="zoom_01" src="small/image1.png" data-zoom-image="large/image1.jpg"/> |
JAVASCRIPT
|
1 |
$("#zoom_01").elevateZoom(); |
При такой настройке картинка будет увеличиваться в отдельном окошке. На самом изображении вокруг курсора будет прозрачный квадрат.
2. Зум с оттенком на изображении
Настройка будет такая:
HTML
|
1 |
<img id="zoom_02" src="small/image1.png" data-zoom-image="large/image1.jpg"/> |
JAVASCRIPT
|
1 |
$("#zoom_02").elevateZoom({tint:true, tintColour:'#F90', tintOpacity:0.5}); |
Так картинка будет увеличена в отдельном окне, а на обычной картинке будет выполнено затемнение. Этому затемнению можно задать прозрачность (tintOpacity:0.5) и цвет прозрачной заливки tintColour:’#f90′.
3. Зум в виде линзы
При наведении на картинку появляется увеличивающая линза-круг. Настройки:
HTML
|
1 |
<img id="zoom_01" src="small/image1.png" data-zoom-image="large/image1.jpg"/> |
JAVASCRIPT
|
1 2 |
$("#zoom_01").elevateZoom({ zoomType : "lens", lensShape : "round", lensSize : 200 }); |
Здесь в настройках указывается тип увеличителя линза, затем тип самой линзы (круг, но в старых браузерах может отображаться квадрат) и размеры линзы.
Это не все типы, но в пределах статьи хватит и указанных. Более подробную информацию вы можете получить на официальном сайте , который указан в статье Увеличение картинки 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. В этом файле вы увидите следующее:
Здесь нужно удалить надпись position=»before» — она лишняя, а затем, вместо:
|
1 2 3 |
<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 |
<script type="text/javascript"> $(document).ready(function(){$("#zoom_01").elevateZoom({cursor:"lens",responsive: "true",scrollZoom:"true"})}),; </script> |
мы получим тип увеличения — линза, адаптивность, и увеличение прокруткой колёсиком мышки. Так что вариантов настройки масса. После внесения изменений — сохраняете файл под тем же именем, архивируете всё обратно и устанавливаете через административную панель OpenCart. Не забудьте на странице установленных дополнений нажать на кнопку «Обновить», как после установки, так и после удаления. Успехов!
Все сделал по инструкции — никаких изменений. В чем может быть проблема? Уже и руками решил все прописать — результат тот же(
может версия не подходит? Для 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. Прежде чем установить, удалите старое установленное расширение и обновите кэш (системы, картинок и дополнений). Устанавливайте стандартным способом. После установки — включите это дополнение и перейдите в товар. На картинке с товаром должна быть линза…. отпишитесь потом)
Вот я тоже по инструкции делаю, плагин работает, но почему-то те изменения, которые мы указывает в файле инсталл перед установкой, не работают, т.е ни вид зума, ни тип курсора, не меняется.
Екатерина! Напишите, какие настройки вы хотите сделать — вечером отправим вам готовый файл. Примерно, после 7 мск.
Хм, хочу вот так: $(document).ready(function(){$(«#zoom_05″).elevateZoom({zoomType:»inner»,cursor:»crosshair»,responsive:»true»})});, а работает как по умолчанию: $(document).ready(function(){$(«#zoom_01»).elevateZoom();, может там где-то стили прописываются, или мои стили перекрывают. Пробовала и с оф.сайта полный скрипт подгружать, и вручную все прописывать в product.tpl, видимо руки не оттуда растут=)
Хм, всё вроде верно написано. Проверьте ковычки, например, у #zoom_05 не правильно поставлены — может просто не верно скопировалось, но всё же. Кроме того, изображению должен быть прописан ID соответствующий. Это всё верно сделано? Кэш обновляли?
Хм, не знаю почему, но если указать в обоих случаях вместо #zoom_05 —> #zoom_01 работает, правда, изображение вписывается в прямоугольник, но это я полагаю установки размера большого изображения в настройках опенкарта.
Почему этот плагин увеличивает только миниатюру, как сделать так чтобы когда наводить то лупа подгружала оригинальную картинку а не уменьшенную её копию. качество ужасное.
При установке пишет:
«Неправильный тип файла!»
OCPRO 2.3
Здравствуйте!
Поставил на сайт, в Менеджере показано, что установлен, но на деле не работает(
Как быть?