В комплекте два вида на lightGallery 2.x: встроенная карусель и простые миниатюры.
lightGallery распространяется под GPLv3, для коммерческих сайтов нужна лицензия. Ключ указывается в чанках в
licenseKey.
Подключение библиотеки
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/lightgallery@2.7.2/css/lightgallery-bundle.min.css">
<script src="https://cdn.jsdelivr.net/npm/lightgallery@2.7.2/lightgallery.umd.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/lightgallery@2.7.2/plugins/thumbnail/lg-thumbnail.umd.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/lightgallery@2.7.2/plugins/zoom/lg-zoom.umd.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/lightgallery@2.7.2/plugins/fullscreen/lg-fullscreen.umd.min.js"></script>Скрипты подключайте до вызова сниппета или в <head>: чанки запускают галерею на DOMContentLoaded.
Карусель
Большое фото со стрелками и лентой превью прямо на странице (плагины zoom и thumbnail).
[[!Gallery3x?
&tplOuter=`tpl.Gallery3x.carousel.outer`
&tplThumb=`tpl.Gallery3x.carousel.item`
]]- В слайде — размер
big, в ленте —small; подпись — название и описание фото. - Контейнер с фиксированным
id="inline-gallery-container": на странице — одна такая карусель. Для нескольких скопируйте чанк и поменяйте id. - Размер и пропорции карусели — в стилях в начале чанка
tpl.Gallery3x.carousel.outer.
Простые миниатюры
Миниатюры small, по клику — просмотр big в окне (плагины thumbnail, zoom, fullscreen).
[[!Gallery3x?
&tplOuter=`tpl.Gallery3x.static_thumbnails.outer`
&tplThumb=`tpl.Gallery3x.static_thumbnails`
]]Контейнер — id="static-thumbnails", тоже один на страницу.
Живые примеры — на демо-сайте demog3x.ivan345.com.