Мне пришлось помучится с несколькими источниками, которые я укажу ниже, надеюсь Вам будет по проще. Создаем галерею в MODX revo. Для чего необходимо скачать несколько файлов:
Компонент Gallery
If для MODX Revo
Colorbox lightbox плагин для JQuery
jquery.lazyload.mini.js
jquery.min.js
Теперь необходимо установить компонент Gallery и дополнение IF в MODX. Сделать это возможно скопировав архивы в папку “core/packages”, затем в админке перейти в “Система -> Управление пакетами -> Загрузить дополнения -> Искать пакет локально” теперь вы увидите их в списке дополнений. Кликните установить.
Теперь нужно скопировать jquery.lazyload.mini.js, jquery.min.js в папку “/assets/templates/ВАШ ШАБЛОН/js”, а архив colorbox-master.zip распаковать и поместить в папку “/assets/templates/ВАШ ШАБЛОН/” под именем colorbox (т.к. у меня пути к папке именно с таким именем)
Теперь нужно создать три чанка: MyGalItemThumb
<div class="[[+cls]]"> <a href="[[+image]]" rel="colorbox" title="[[+description]]"> <img class="[[+imgCls]]" src="[[+thumbnail]]" alt="[[+name]]" /> </a> [[+name]] </div>
MyGalAlbumRowTpl
<div class="albumPreview"> <h3><a href="[[~[[*id]]? &[[+albumRequestVar]]=`[[+id]]`]]">[[+name]]</a></h3> <div class="thumb"> <a href="[[~[[*id]]? &[[+albumRequestVar]]=`[[+id]]`]]"><img src="[[+image]]" alt="[[+name]]"/></a> </div> <div class="desc"> <p>[[+description]]</p> <a href="[[~[[*id]]? &[[+albumRequestVar]]=`[[+id]]`]]" class="view">Показать фотографии</a> </div> </div>
MyGalleryAlbumTpl
<h1>[[+album_name]]</h1> <p>[[+album_description]]</p> [[+thumbnails]]
И шаблон, в который вставить (я привожу шаблон исключительно для проверки работоспособности галереи):
<!doctype html>
<head>
<base href="[[++site_url]]" />
<title>[[++site_name]] — [[*pagetitle]]</title>
<link rel="stylesheet" href="/assets/templates/ВАШ ШАБЛОН/colorbox/example1/colorbox.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script src="/assets/templates/ВАШ ШАБЛОН/js/jquery-1.9.1.min.js"></script>
<script src="/assets/templates/ВАШ ШАБЛОН/js/jquery.lazyload.mini.js"></script>
<script src="/assets/templates/ВАШ ШАБЛОН/colorbox/jquery.colorbox-min.js"></script>
<script>
$(document).ready(function () {
$("img").lazyload({effect : "fadeIn"});
$("a[rel='colorbox']").colorbox();
});
</script>
</head>
<body>
<h1 class="basich1">[[*pagetitle]]</h1>
[[*content]]
[[!GalleryAlbums? &toPlaceholder=`GalleryAlbums` &limit=`0` &albumCoverSort=`rank` &prominentOnly=`0` &rowTpl=`MyGalAlbumRowTpl` &thumbWidth=`195` &thumbHeight=`140`]]
[[!Gallery? &checkForRequestTagVar=`1` &toPlaceholder=`Gallery` &useCss=`0` &containerTpl=`MyGalleryAlbumTpl` &thumbWidth=`195` &thumbHeight=`140` &thumbTpl=`MyGalItemThumb` &imageWidth=`800` &imageHeight=`800`]]
[[!If? &subject=`[[+Gallery]]` &operator=`isempty` &then=`
[[+GalleryAlbums]]
`]]
[[+Gallery]]
</body>
</html>
Теперь присвойте одному из ресурсов созданный выше шаблон.
Теперь нужно создать альбомы и загрузить фотографии. Открываем в верхнем меню админки “Компоненты -> Gallery” и добавляем альбом. Теперь в него можно войти и добавить изображения. Подробно рассказывать не буду там интуитивно все понятно. Да кстати что бы добавить описание для фотографии нужно кликнуть на ней правой кнопкой мыши и выбрать “Редактировать элемент”
Пример работы компонента
Источники: