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

Увеличение картинки Opencart (OcStore)

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

Гораздо более просто и удобный способ — это использование плагина Image Zoom Opencart, работающего на Elevate Zoom плагине. Ссылка на официальную страничку модуля: здесь.

Установка Image Zoom Opencart 2

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

Характеристики Elevate Zoom плагина

Jquery Plugin Image Zoom плагин обладает следующими характеристиками:

  • Полностью Настраиваемый
  • Цветные оттенки
  • Поддержка FancyBox галереи
  • Переменное масштабирование на прокрутки мыши
  • Внешние элементы управления
  • Окно Zoom, зум-объектив и внутренний увеличитель
  • Бесплатное использование под MIT и GPL лицензии

uvelichenie-kartinki-opencart

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

Параметры конфигурации Jquery Plugin Image Zoom Opencart

Доступны следующие варианты для увеличения:

  • responsive — по-умолчанию стоит «False». Установите «True» для активации адаптивности.
  • scrollZoom — по-умолчанию стоит «False». Установите «True» для активации зума при прокрутки колёсика мыши.
  • imageCrossfade — по-умолчанию стоит «False». Установите «True», чтобы активировать одновременную склейку изображений на изменения галереи.
  • другие параметры настройки скрипта вы можете найти по ссылке: http://www.elevateweb.co.uk/image-zoom/configuration

Настройка установленного модуля увеличения изображений Опенкарт
После установки данного расширения, необходимо выполнить его настройки. Для этого следует открыть для редактирования файл: /system/storage/modification/catalog/view/theme/default/template/common/footer.tpl.

Внизу файла footer.tpl вы увидите:

Вместо этого можно вписать:

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

Все возможные варианты настроек вы может увидеть наглядно по ссылке: http://www.elevateweb.co.uk/image-zoom/examples.

Если у вас возникнут сложности с установкой и настройкой Image Zoom Opencart — обращайтесь в комментарии. Мы вам поможем!)

ПРИМЕР РЕАЛИЗАЦИИ (со стандартными настройками) — на нашем тестовом сайте SHADELLE.RU

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

Комментарии

Комментариев: 10, к записи: “Увеличение картинки Opencart (OcStore)
  • Нет аватара
    Денис пишет:

    Добрый день!

    Подскажите, как реализовать Gallery & Lightbox
    _http://www.elevateweb.co.uk/image-zoom/examples

    На данный момент, главная картинка работает как надо. Дополнительные, открываются сразу в Fancy.

    Буду вам признателен!

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

      Здравсвтуйте! Можно попробовать вместо ID=»zoom01″ использовать class=»zoom_id». Затем, для каждого изображения добавить данный класс. Имеется в виду, что добавить данный класс нужно для тех картинок, для которых нужен ЗУМ.

      Ответить
  • Нет аватара
    Денис пишет:

    Попробовал, не срабатывает.

    Может знаете как сделать скролл дополнительных изображений, с переключением(заменой) главной?

    Можно вас попросить удалить ссылку, сайта еще нет в индексе, поспешил)

    Ответить
  • Нет аватара
    Владимир пишет:

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

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

      Настроек действительно нет. Всё нужно настраивать перед установкой. Т.е. удаляете установленное приложение и вносите все необходимые настройки в установочный файл… Думаю эта тема отдельной статьи) Через пару часов будет)

      Ответить
  • Нет аватара
    Владимир пишет:

    И не могди быВы показать на скрине где эти настройки? Спасибо.

    Ответить
  • Нет аватара
    Антон пишет:

    Добрый день! как настроить Easing зум на опенкарте?

    Ответить
  • Нет аватара
    Антон пишет:

    и куда вписать
    HTML
    ??

    Ответить
  • Нет аватара
    Илья пишет:

    Как установить elevate zoom на последний opencart (2.3) через ocmod? Перед установкой файл переименовал в …ocmod.zip, он даже установился, но в менеджере дополнений в списке установленных его нет

    Ответить

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

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