Организация галереи Modx Revolution + Gallery

Дата публикации: 29 Ноя 2016г.

Итак, для организации галереи на сайте нам потребуется пакет Gallery. Скачиваем его и устанавливаем. Вывод и увеличение картинок мы будет делать с помощью jQuery плагина fancyBox. Идем на их официальный сайт и качаем плагин. Следующий наш шаг это подключение плагина. Заливаем на хостинг файлы, в корневой директории на хостинге создаем папку «fancybox» и заливаем туда папку «source». Открываем шаблон страницы и между тегами <head></head> вставляем код:

<!--Add jQuery library -->
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<!-- Add fancyBox -->
<link rel="stylesheet" href="/fancybox/source/jquery.fancybox.css?v=2.1.5" type="text/css" media="screen" />
<script type="text/javascript" src="/fancybox/source/jquery.fancybox.pack.js?v=2.1.5"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.fancybox').fancybox();
});
</script>

А теперь непосредственно к организации галереи, задача вывести на экран один альбом галереи в виде плитки с превьшками изображений, по клику на любую картинку она увеличивается. В админке идем компоненты → Gallery создаем новый альбом, добавляем картинки, сохраняем. Создаем чанк NewGalleryAlbumTpl с кодом:

<ul class="galleries">
[[+thumbnails]]
</ul>
<div class="clear"></div>

И чанк NewGalItemThumb с кодом

<li><a href="[[+image]]" class="fancybox" rel="external">
<img src="[[+thumbnail]]" alt="" /></a>
</li>

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

[[!Gallery? &album=`photo` &containerTpl=`NewGalleryAlbumTpl` &thumbWidth=`250` &thumbHeight=`194` &thumbTpl=`NewGalItemThumb` &imageWidth=`750` &imageHeight=`800` &sort=`rand`]]
Параметр Значение Описание
album photo название альбома который выводим
containerTpl NewGalleryAlbumTpl Шаблон для вывода альбома
thumbTpl NewGalItemThumb Шаблон для вывода отдельного изображения
thumbWidth 250 Ширина в пикселях превью картинки
thumbHeight 194 Высота в пикселях превью картинки
imageWidth 750 Ширина в пикселях полноразмерной картинки
imageHeight 800 Высота в пикселях полноразмерной картинки
sort rand Сортировка вывода превью (rand – в случайном порядке) если указано в шаблоне &sort=`createdon` - сортировка по дате добавления если указано в шаблоне &sort=`rand` - сортировка рандомом если параметр sort не указан то выводится так как в галерее можно сортировать в обратном порядке так &dir=`DESC`

Для оформления используем css

/* Gallery -----------------------------------------------------------------------------*/
.galleries {
margin: 15px auto;
width: 770px;
}
.galleries li {
width: 250px;
height: 194px;
float: left;
padding: 0;
margin-right: 5px;
margin-bottom: 5px;
}
.galleries li img {
float: left;
width: 250px;
height: 194px;
margin: 0;
padding: 0;
}

Официальная документация по использованию плагина Gallery