Opencart фотогалерея

Если возникла необходимость создать галерею на opencart, то в стандартной сборке присутствует плагин magnific-popup. По умолчанию он автоматически подключается к карточке товара, а чтобы был подключен всегда сделаем следующее:

В /catalog/controller/common/header.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');

Эти же строчки нужно удалить из /catalog/controller/product/product.php

После этого плагин magnific-popup подгружается всегда и его можно использовать где угодно на сайте. Теперь создадим страницу с информацией и назовём её "галерея". В тексте страницы вставляем нужные картинки, затем заходим в html редактор (кнопка "Code view").

Каждую картинку нужно обернуть в ссылку, а каждой ссылке присвоить класс gallery. Получится примерно следующее:

<a class="gallery" href="/image/catalog/demo/canon_eos_5d_3.jpg"><img src="/image/catalog/demo/canon_eos_5d_3.jpg" style="width: 250px;"></a>

<a class="gallery" href="/image/catalog/demo/canon_eos_5d_2.jpg"><img src="/image/catalog/demo/canon_eos_5d_2.jpg" style="width: 250px;"></a>

<a class="gallery" href="/image/catalog/demo/canon_eos_5d_1.jpg"><img style="width: 250px;" src="/image/catalog/demo/canon_eos_5d_1.jpg">
</a>

Далее подключаем плагин Magnific Popup:

<script>
$(document).ready(function() 
{
$('.gallery').magnificPopup(
 {
 type: 'image',
 gallery: {enabled: true},
 removalDelay: 500,
 mainClass: 'mfp-fade'
 });
});
</script>

Галерея уже готова, но её можно слегка приукрасить, подключив плавную анимацию:

<style>
.mfp-fade.mfp-bg {
  background-color:rgba(0,0,0,0);
  transition: all 0.5s linear;
}
.mfp-fade.mfp-ready
{
  background-color:rgba(0,0,0,0.8);
}
.mfp-fade.mfp-removing
{
  opacity: 0;
}
</style>

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