Установка, настройка и первая галерея на странице — за пять минут.
Шаг 1. Установка
- Скачайте пакет Gallery3x с MODX Extras или загрузите его через «Установщик» в админке MODX.
- Установите пакет. Компонент создаст таблицы, системные настройки, плагины, источник файлов «Gallery3x Source» и при необходимости поставит pdoTools.
pdoTools нужен только для чанков в синтаксисе Fenom (
&fenom=`1`). Обычные чанки работают и без него.
Шаг 2. Шаблоны
- Откройте Настройки → Системные настройки, пространство имён gallery3x.
- В настройке
gallery3x.templatesперечислите через запятую ID шаблонов, у которых нужна галерея, например1,3,5.
Если
gallery3x.templatesпуста, вкладка галереи не появится ни у одного ресурса.
Видео, файлы и embed включаются отдельно: gallery3x.video_enable, gallery3x.files_enable, gallery3x.embed_enable.
Шаг 3. Загрузка фото
- Откройте ресурс с одним из этих шаблонов — появится вкладка Галерея G3x.
- Перетащите изображения в область загрузки. Превью нарежутся сразу.
- Перетаскиванием миниатюр задайте порядок; правой кнопкой — свойства фото (название, alt, описание, группы).
Шаг 4. Вывод на сайте
Самый простой вариант — сетка миниатюр с просмотром в Fancybox. Подключите библиотеку и вызовите сниппет в шаблоне или содержимом ресурса:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fancyapps/ui@6.0/dist/fancybox/fancybox.css">
[[!Gallery3x?
&tplOuter=`tpl.Gallery3x.Fancybox.GridOuter`
&tplThumb=`tpl.Gallery3x.Fancybox.GridItem`
]]
<script src="https://cdn.jsdelivr.net/npm/@fancyapps/ui@6.0/dist/fancybox/fancybox.umd.js"></script>
<script>
Fancybox.bind('[data-fancybox="gallery"]', {});
</script>Другие готовые виды (большое фото с лентой миниатюр, карусель lightGallery, Fenom-варианты) — на страницах Fancybox и Lightgallery. Все параметры сниппета — Gallery3x.
Свои чанки
Не правьте стандартные чанки tpl.Gallery3x.*: при обновлении компонента они перезаписываются. Скопируйте нужный чанк под своим именем (например, tpl.mysite.gallery.item), измените копию и укажите её в вызове сниппета.