Функционал подключает галерею ( LightGallery ). При нажатии изображения картинки полное изображение открывается с возможностью слайд-шоу. Можно создавать как встроенные, так и лайтбокс-галереи (в правом углу размещается ряд кнопок (настраивается) для расширенных функций. Например: “Закрыть слайд-шоу”, “Загрузка изображения” и др. Галерея, поддерживает как простые изображения, так и видео или фреймы.
Для работы галереи необходимы изображения (видеофайлы) в двух форматах: миниатюры – изображения небольшого размера, которые используются для просмотра и изображения полного размера – необходимы для детального просмотра.
Расположение компонента
Файлы компонента находятся в папке src/components/layout/gallery, здесь вы найдете JS-файл компонента с базовыми настройками, HTML-файл с примером кода, а также папку assets с CSS-файлами компонента.
Использование компонента
В HTML , к тегу отца объектов галереи, добавляем дата-атрибут data-fls-gallery .
<div data-fls-gallery class="gallery"> .... </div>Сам объект галереи состоит из такой конструкции (тег для полного размера изображения и внутри тег для превью). Например, можно использовать следующую разметку:
<div data-fls-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>Для более широкого использования возможностей компонента галереи см. документацию LiteGallery