Featherlight Gallery

Featherlight — это минималистичная библиотека для создания модальных окон на JavaScript и jQuery. Она легкая, не требует сложной настройки и поддерживает расширение функциональности через плагины, одним из которых является Featherlight Gallery. Этот плагин позволяет создавать карусели изображений, галереи с навигацией и плавными переходами между элементами.

Featherlight Gallery работает как надстройка над базовым Featherlight. Для использования галереи необходимо подключить основной скрипт Featherlight и отдельный скрипт галереи (jquery.featherlight.gallery.js), а также стили featherlight.css и featherlight.gallery.css.

<link href="featherlight.css" rel="stylesheet">
<link href="featherlight.gallery.css" rel="stylesheet">
<script src="jquery.js"></script>
<script src="jquery.featherlight.js"></script>
<script src="jquery.featherlight.gallery.js"></script>

Инициализация галереи

Галерея инициализируется с помощью селектора, который указывает на все элементы, содержащие изображения для показа. Например:

$('.gallery a').featherlightGallery({
    gallery: {
        fadeIn: 300,
        fadeOut: 300,
        previous: '◀',
        next: '▶'
    }
});

В этом примере:

  • fadeIn и fadeOut задают длительность анимации появления и скрытия окна.
  • previous и next задают символы или текст кнопок навигации между изображениями.

Параметр gallery позволяет настраивать поведение галереи отдельно от базового окна Featherlight.

Структура HTML для галереи

Featherlight Gallery использует стандартные ссылки <a> с атрибутом href, указывающим на изображение. Все элементы галереи должны иметь общий контейнер или класс. Например:

<div class="gallery">
    <a href="img1.jpg" title="Первое изображение"><img src="thumb1.jpg" alt=""></a>
    <a href="img2.jpg" title="Второе изображение"><img src="thumb2.jpg" alt=""></a>
    <a href="img3.jpg" title="Третье изображение"><img src="thumb3.jpg" alt=""></a>
</div>

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

Настройка навигации

Featherlight Gallery поддерживает несколько видов навигации:

  1. Кнопки “следующее” и “предыдущее” — задаются через параметры previous и next.
  2. Клавиши клавиатуры — стрелки влево и вправо перемещают по галерее.
  3. Клики по изображению — при клике на текущее изображение происходит переход к следующему.

Дополнительно можно включить циклическую навигацию с помощью параметра loop:

$('.gallery a').featherlightGallery({
    gallery: {
        loop: true
    }
});

Если loop установлен в true, то после последнего изображения галерея вернётся к первому.

Пользовательские события

Featherlight Gallery предоставляет ряд событий, которые можно использовать для расширенной логики:

  • beforeOpen — вызывается перед открытием окна.
  • afterOpen — после открытия.
  • beforeClose — перед закрытием.
  • afterClose — после закрытия.
  • change — при смене изображения.

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

$('.gallery a').featherlightGallery({
    beforeOpen: function(event){
        console.log('Открытие галереи');
    },
    change: function(event){
        console.log('Показ изображения: ', this.currImg);
    }
});

this.currImg возвращает DOM-элемент текущего изображения.

Кастомизация внешнего вида

Featherlight Gallery использует CSS для стилизации кнопок навигации, подписи и контейнера. Основные классы:

  • .featherlight — основной контейнер модального окна.
  • .featherlight-content — контейнер для контента.
  • .featherlight-gallery — активная галерея.
  • .featherlight-nav — навигационные элементы.
  • .featherlight-caption — подпись изображения.

Для изменения внешнего вида достаточно переопределить эти классы в собственных стилях. Например, чтобы изменить цвет кнопок:

.featherlight-nav a {
    color: #ffffff;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 50%;
}

Поддержка медиа-контента

Помимо изображений, Featherlight Gallery может работать с видео и другими HTML-элементами. Для этого в атрибуте href указывают ссылку на iframe или создают отдельный контейнер с контентом:

<a href="https://www.youtube.com/embed/dQw4w9WgXcQ" data-featherlight="iframe">Видео</a>

В таком случае плагин автоматически откроет iframe в модальном окне с навигацией по галерее.

Оптимизация работы

Для больших галерей рекомендуется:

  1. Использовать миниатюры (thumb) для уменьшения веса страницы.
  2. Загружать изображения лениво через loading="lazy".
  3. Минимизировать количество одновременных скриптов, оставляя только необходимые модули Featherlight и галерею.

Featherlight Gallery не нагружает DOM лишними элементами: все элементы создаются динамически при открытии окна и удаляются при закрытии, что сохраняет производительность даже при сотнях изображений.

Примеры расширенных настроек

  • Автозапуск слайд-шоу:
$('.gallery a').featherlightGallery({
    gallery: {
        slideshow: true,
        slideshowSpeed: 5000
    }
});
  • Кастомные шаблоны модального окна:
$.featherlightGallery.prototype.template = 
  '<div class="featherlight-gallery custom">' +
    '<div class="featherlight-content"></div>' +
    '<nav class="featherlight-nav"></nav>' +
    '<div class="featherlight-caption"></div>' +
  '</div>';
  • Фильтрация изображений по атрибуту:
$('.gallery a[data-category="nature"]').featherlightGallery();

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

Featherlight Gallery сочетает минимализм, легкость и гибкость настройки, обеспечивая удобную навигацию по изображениям, подписи, анимации и поддержку медиа-контента, оставаясь при этом максимально производительной.

Оглавление