Создания адаптивной галереи в MODX при помощи Gallery

В данном уроке по MODX будем делать довольно продвинутую адаптивную галерею изображений в виде сетки типа как у pinterest, но с лайтбоксом при помощи  пакета Gallery.

Статья полностью переписана!

Устанавливается пакет из основного репозитория modx. Документация по компоненту находиться в уроке: MODX Gallery (дополнение для создания галереи): документация на русском.

За создание сетки как у pinterest у нас будет отвечать jQuery плагин: masonry v4 — о нем у меня уже был урок: Bootstrap + masonry.

За увеличение картинок у нас будет отвечать jQuery плагин fancyBox v4.

Ну до кучи возьмем css сетку от bootstrap v4. Все 4 версии)

Подключение JS и CSS к сайту

Открываем чанк где у нас подключается все стили и скрипты, обычно файлы стилей подключают в секции head, подключите туда следующие CSS:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap-grid.min.css">

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fancyapps/ui/dist/fancybox.css"/>

Так же в секции head после стилей рекомендую подключить библиотеку jQuery — если она уже не подключена.

<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>

И следом за ней — либо вообще перев закрывающимся тегом body (jQuery обязательно должна быть выше) подключаем js библиотеки masonry и fancyBox.

<script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@fancyapps/ui@4.0/dist/fancybox.umd.js"></script>

Все подготовили.

Создание галереи в Gallery и загрузка в нее изображений

Заходим в «Приложения» —  «Gallery» и создаём новую галерею.

После щелкаем 2 раза на только что созданный альбом и загружаем в него изображения (для этого нажмите кнопку Multi-Upload).

Вывод созданной галереи в MODX

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

Создаем чанк обвертку MyGalleryAlbumTpl с кодом:

<div class="clearfix mosaicflow"> 
 [[+thumbnails]]
</div>

B чанк оформления изображений MyGalItemThumb с кодом:

<div class="mosaicflow__item"> 
 <a class="fancyimage" data-fancybox-group="group" title="[[+name]]" href="[[+image]]">
 <img src="[[+image]]" alt="[[+description]]" title="[[+name]]"/></a>
</div>

Ну и вызываем в нужном месте галерею (при выводе на страницах, нужно отключать текстовый редактор):

[[!Gallery? &album=`17` &containerTpl=`MyGalleryAlbumTpl` &thumbTpl=`MyGalItemThumb` &sort=`rand`]]

где:

• &album — id альбома, который выводим;
• &containerTpl — шаблон для вывода альбома;
• &thumbTpl — шаблон для вывода отдельного изображения;
• &sort- Сортировка вывода превью (rand – в случайном порядке).

Оф. документация дополнения Gallery: rtfm.modx.com/extras/revo/gallery

И вот еще CSS для нормальной работы Mosaic Flow и ее оформления.

.mosaicflow__item { 
padding:3px; 
} 
.mosaicflow__column { 
float:left; 
} 
.mosaicflow__item img { 
display:block; 
width:100%; 
height:auto; 
padding: 4px; 
background-color: #fff; 
border: 1px solid #ddd; 
border-radius: 4px; 
} 
.mosaicflow__item img:hover { 
opacity: 0.6; 
filter: alpha(opacity=60); 
}

В конечном итоге получается вот такая галерея:

Вот так всплывет картинка при клике по ней.

Надеюсь данный урок будет для вас полезен!