Gallery3x

Компонент Gallery3x поставляется с основным сниппетом [[!Gallery3x]], который отвечает за вывод изображений на страницах сайта. Сниппет разработан с упором на гибкость и производительность, позволяя создавать галереи любой сложности.

Ключевая особенность

Сниппет не создает превью "на лету". Он работает с уже готовыми, заранее сгенерированными изображениями, которые были созданы в админ-панели при загрузке файлов. Это обеспечивает максимальную скорость загрузки страниц для посетителей вашего сайта.

Сниппет `[[!Gallery3x]]`

Основная задача сниппета — получить все активные изображения для указанного ресурса, отсортировать их и передать данные в чанки для оформления.

Параметры

Параметр	По умолчанию	Описание
&resource	ID текущего ресурса	ID ресурса, из которого нужно вывести изображения.
&tpl	tpl.Gallery3x.item	Имя чанка для оформления одного элемента (используется в простых выводах).
&tplOuter	tpl.Gallery3x.carousel.outer	Имя чанка-обертки для сложных галерей (например, каруселей).
&tplThumb	tpl.Gallery3x.carousel.thumbItem	Имя чанка для элемента в ленте превью (используется вместе с `tplOuter`).
&limit	0	Ограничение на количество выводимых изображений. `0` — без ограничений.
&sortBy	position	Поле для сортировки изображений.
&sortDir	ASC	Направление сортировки (`ASC` или `DESC`).
&debug	0	Если установить в `1`, вместо галереи на странице будет выведен массив со всеми данными, которые сниппет подготовил. Очень полезно для отладки.

Доступные плейсхолдеры

Сниппет передает в чанк все поля из таблицы компонента, а также автоматически генерирует URL для всех существующих превью.

[[+id]] - ID записи
[[+name]] - Название (title)
[[+description]] - Описание
[[+alt]] - Альтернативный текст
[[+file]] - Имя файла (например, my-photo.jpg)
[[+createdon]] - Дата загрузки
[[+size]] - Размер файла в байтах
[[+original_url]] - URL к оригинальному изображению
[[+small_url]] - URL к превью 'small'
[[+medium_url]] - URL к превью 'medium'
[[+любое_имя_превью_url]] - Если вы создадите превью с именем big, здесь будет доступен плейсхолдер [[+big_url]].

Примеры использования

Пример 1: Простая сетка изображений (как в демо lightGallery)

Этот пример выводит на странице сетку из миниатюр. При клике на любую из них открывается лайтбокс с полноразмерным изображением и лентой превью внизу.

Этот пример выводит на странице большую картинку, а под ней — прокручиваемую ленту миниатюр. Клик по миниатюре меняет большое изображение, а клик по большому изображению открывает лайтбокс.