Как вы знаете Opencart 2 сверстан на основе Bootstrap. И не воспользоваться множеством готовых скриптов, коих в интернете можно найти достаточно, было бы глупо. У многих пользователей тач-устройств уже сформировалась привычка листать изображения пальцем по экрану. Иногда эта привычку можно заметить, когда просматриваешь фото на фотоаппарате, у которого нет сенсорного экрана. Что уже говорить о телефонах или планшетах... Скрипт просмотра изображений Magnific Popup достался Opencart 2 в наследство от предыдущей версии. Он морально устарел и не соответствует современным требованиям привычек пользователей. Поэтому предлагаю вам заменить его на более современный скрипт и одну из лучших галерей на мой взгляд: blueimp Gallery Скачиваем архив: https://github.com/blueimp/Gallery По адресу \catalog\view\javascript\jquery\ создаем папку blueimp и копируем туда 3 папки (css, img, js) из архива. Открываем \catalog\controller\product\product.php Ищем 2 строчки: PHP: $this->document->addScript('catalog/view/javascript/jquery/magnific/jquery.magnific-popup.min.js'); $this->document->addStyle('catalog/view/javascript/jquery/magnific/magnific-popup.css'); и заменяем их на это: PHP: $this->document->addScript('catalog/view/javascript/jquery/blueimp/js/blueimp-gallery.min.js'); $this->document->addStyle('catalog/view/javascript/jquery/blueimp/css/blueimp-gallery.min.css'); Открываем шаблон карточки товара \catalog\view\theme\default\template\product\product.tpl Ищем Код: <ul class="thumbnails"> и добавляем id чтоб получилось так: Код: <ul class="thumbnails" id="blueimp"> Ищем функцию Javascript отвечающую за magnificPopup: Код: $(document).ready(function() { $('.thumbnails').magnificPopup({ type:'image', delegate: 'a', gallery: { enabled:true } }); }); так как она нам больше не нужна, заменяем её на функцию blueimp Код: document.getElementById('blueimp').onclick = function (event) { event = event || window.event; var target = event.target || event.srcElement, link = target.src ? target.parentNode : target, options = {index: link, event: event}, links = this.getElementsByTagName('a'); blueimp.Gallery(links, options); }; Ищем в самом низу строку: PHP: <?php echo $footer; ?> Перед ней вставляем код навигации в PopUp: HTML: <div id="blueimp-gallery" class="blueimp-gallery blueimp-gallery-controls"> <div class="slides"></div> <h3 class="title"></h3> <a class="prev">‹</a> <a class="next">›</a> <a class="close">×</a> <a class="play-pause"></a> <ol class="indicator"></ol> </div> В результате чего вы получите стильную PopUp-галерею со всеми плюсами "крос-платформо-устройственной" юзобильности. Успехов!
Возможно вы заметите небольшой косяк что при нажатии на поле около изображений открываются фото. Но это не косяк скрипта, а верстки. А именно свойства overflow: auto; в классе .thumbnails Вам необходимо поиграть с версткой.
Для тех кто не хочет заморачиваться в редакторах, сделал Модификацию: http://shop.opencart-russia.ru/blueimp-gallery
Странно, сейчас с компа открывается, а в тот раз с ноута пробовала, ошибку выдавало... Глюк, наверное. Ссылку в 3 посте я имела ввиду.
Отличный popup, но столкнулся с такой проблемой - у меня в одном шаблоне в попап окно выводятся несколько изображений. Т.е. не из одного списка! Соответственно задать им один и тот же id я не могу. Как то можно это решить?
В этом случае читаем раздел: https://github.com/blueimp/Gallery#jquery-plugin-setup Спойлер: Видео в поп-ап Попозже запилю расширенную версию http://shop.opencart-russia.ru/blueimp-gallery с возможностью добавления видео в попапе. Она у меня уже раелизована на одном сайте, все руки не доходят оформить для продажи.
@XDX , не могу разобраться что сделать со скриптом чтоб работало.... Например вот для такого шаблона.... Код: <?php if ($thumb) { ?> <div class="col-lg-5 col-md-5 col-sm-6 col-xs-12"> <div class="mainphoto thumbnails boxshadow"> <a class="thumbnail" href="<?php echo $popup; ?>" title="<?php echo $heading_title; ?>" data-gallery> <span class="product-name"><?php echo $model; ?></span> <img src="<?php echo $thumb; ?>" alt="<?php echo $heading_title; ?>" /> <?php if ($special) { ?> <span class="special-stock"></span> <?php } ?> </a> </div> <?php if ($images) { ?> <ul class="thumbnails"> <?php if ($images) { ?> <?php foreach ($images as $image) { ?> <li class="image-additional"> <a class="thumbnail boxshadow" href="<?php echo $image['popup']; ?>" title="<?php echo $heading_title; ?>" data-gallery><img src="<?php echo $image['thumb']; ?>" alt="<?php echo $heading_title; ?>" /></a> </li> <?php } ?> <?php } ?> </ul> <?php } ?> </div> <?php } ?>
Лайт-бокс установлен. Исходя из инструкции по предыдущей ссылке, я понял, что надо прописать для ссылок на фото data-gallery. Ещё там написано, что можно убрать из скрипта функцию onclick. И вот я не пойму как теперь должен выглядеть скрипт... Код: document.getElementById('blueimp').onclick = function (event) { event = event || window.event; var target = event.target || event.srcElement, link = target.src ? target.parentNode : target, options = {index: link, event: event}, links = this.getElementsByTagName('a'); blueimp.Gallery(links, options); }; Или его вообще теперь нужно удалить?
Можно ли без замены этих строк? PHP: $this->document->addScript('catalog/view/javascript/jquery/magnific/jquery.magnific-popup.min.js'); $this->document->addStyle('catalog/view/javascript/jquery/magnific/magnific-popup.css'); и заменяем их на это: PHP: $this->document->addScript('catalog/view/javascript/jquery/blueimp/js/blueimp-gallery.min.js'); $this->document->addStyle('catalog/view/javascript/jquery/blueimp/css/blueimp-gallery.min.css'); просто путем добавления? у меня просто если я заменяю magnigic на blueimp то перестает работать футер и некоторые модули динамического изменения цены при выборе опции. но я если я просто добавляют, то у меня открываются две галереи, и старая и новая. можно как нибудь по другому старую отключить при нажатии на изображение?
Привет, у меня такая проблема возникла, что при нажатии на около изображений все равно открывается галерея, убрал как ты сказал overflow: auto; но все равно не помогает, может я что-то не то делаю? Код: <div id="blueimp" style="display:flex"> <div class="contentcenterimg" style="order: 1;"> <ul class="thumbnails"> {% if thumb %} <li><a class="thumbnail111" href="{{ popup }}" title="{{ heading_title }}"><img src="{{ thumb }}" title="{{ heading_title }}" alt="{{ heading_title }}" /></a></li> {% endif %} </ul> </div> <div class="contentleftimg"> <div class="thumbnails"> {% if images %} {% for image in images %} <li class="image-additional"><a class="thumbnail" href="{{ image.popup }}" title="{{ heading_title }}"> <img src="{{ image.thumb }}" title="{{ heading_title }}" alt="{{ heading_title }}" /></a></li> {% endfor %} {% endif %} </div> </div> </div>
Ответ: https://forum.opencart-russia.ru/th...tochke-tovara-blueimp-gallery.602/#post-18364 Да, можно, если есть подключение через Jquery.
Огромнейшее спасибо за помощь, все таки получилось решить данную проблему, прописал data-gallery и подключил через jquery
