|  | 

Уроки по Opencart

Урок 32 Вертикальная и горизонтальная карусель изображений в карточке товара opencart

img-responsive

Уверен, Вы не раз сталкивались с тем, что в опенкарт вывод дополнительных изображений в карточке товара реализован примитивно. Я уже останавливался на модуле карусели дополнительных изображений чтобы решить данную проблему. Сегодня же будем все делать руками.

Если Вы планируете выводить больше 7 изображений, то получите нечто подобное

Вертикальная и горизонтальная карусель изображений

Согласитесь, совсем не привлекательно. И сегодня мы постараемся исправить эту ситуацию. И использовать для этих целей будем замечательный скрипт — Slick. Ссылку на него дам ниже.

Итак начнем. Прежде всего заливаем папку со скриптом в общую папку скриптов

И обязательно подключаем сам скрипт и файл стилей этого плагина в шаблоне хедера

Т.е. сразу перед </head> добавляем

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

Здесь нам необходимо добавить дополнительные размеры изображений для миниатюр и главного изображения. Все дело в том, что для главного изображения сделано 2 типа размеров, и столько же для миниатюр. Для главного изображения нет размера миниатюры, а для миниатюр нет среднего изображения. Итак, находим

и сразу под ним добавляем

Здесь же чуть ниже этот фрагмент

меняем на

Заливаем файл обратно на хостинг и приступаем к шаблону

Горизонтальная карусель дополнительных изображений

Теперь приступим непосредственно к созданию горизонтальной карусели. Открываем шаблон карточки товара по адресу

Здесь это

полностью меняем на

Если все было сделано верно, то теперь вот так будут выглядеть изображения товаров.

Вертикальная и горизонтальная карусель изображений на opencart

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

Ветикальная карусель дополнительных изображений

Для создания вертикальной карусели дополнительных изображений opencart нужно будет проделать чуть больше работы, а именно необходимо разделить блок изображения на две части — одну под миниютюры, вторую — под основные. Замечу что в данных примерах я рассматриваю взаимосвязанные изображения. Т.е. при прокрутке карусели или нажатии в карусели на изображение, это изображение автивируется в основном блоке.

Итак, править нам надо больший фрагмент кода в том же шаблоне карточки товара. В этот раз это

Необходимо заменить на следующий кода

Теперь обновите модификаторы и после обновления карточки товара должны увидеть что то такое

Вертикальная и горизонтальная карусель изображений на opencart

Как и в предыдущем примере с горизонтальной каруселью я не наводит «красоту», так как основная задача получить рабочую красивую карусель изображений. Отлично работает во всех браузерах. Отмечу, что плагин magnificPopup просмотра изображения работает при нажатии на большие изображения. Думаю у всех все получилось. Если что то не понятно — задавайте вопросы. Данный плагин имеет просто огромную массу настроек и позволяет создавать крутые карусели изображений, как вертикальные, так и горизонтальные.

Скачать плагин Slick

vertikalnaja-i-gorizontalnaja-karusel-izobrazhenij

ABOUT THE AUTHOR

Оставить комментарий

avatar
  Подписаться  
Уведомление о

Цель сайта

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

Новые комментарии

© 2010 — 2017, OC-new.com. Все права защищены.

Любое использование материалов допускается только с указанием активной ссылки на источник.