Функционал подключает галерею ( LightGallery ). При нажатии изображения картинки полное изображение открывается с возможностью слайд-шоу. Можно создавать как встроенные, так и лайтбокс-галереи (в правом углу располагается ряд кнопок (настраивается) для расширенных функций. Например: Закрыть слайд-шоу, Загрузка изображения и др. Галерея, поддерживает как простые изображения, так и видео или фреймы.
Для работы галереи необходимы изображения (видеофайлы) в двух форматах: миниатюры – изображения небольшого размера, которые используются для просмотра и изображения полного размера – необходимы для детального просмотра.
Подключение функционала
[JS] В файле js/app.js раскомментировать строку import “./files/gallery.js”;
Использование функционала
[HTML] К тегу отца объектов галереи добавляем HTML-атрибут data-gallery .
<div data-gallery class="gallery"
....
</div>Сам объект галереи состоит из такой конструкции (тег для полного размера изображения и внутри тег для превью). Например, можно использовать следующую разметку:
<div data-gallery class="gallery">
<a href="img/img-full-1.jpg" class="gallery__image">
<img alt="Превью" src="img/img-thumb-1.jpg" class="gallery__preview">
</a>
<a href="img/img-full-2.jpg" class="gallery__image">
<img alt="Превью" src="img/img-thumb-2.jpg" class="gallery__preview">
</a>
...
</div>Расположение и дополнительные данные
Функционал находится в js/files/gallery.js
Подробная документация по работе с самим плагином на сайте галереи https://www.lightgalleryjs.com/docs/