Создание галереи через Featherlight Gallery

Featherlight — это легковесная библиотека для создания модальных окон и галерей изображений. Для начала работы необходимо подключить её стили и скрипт:

<link href="https://cdn.jsdelivr.net/npm/featherlight@1.7.14/release/featherlight.min.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/featherlight@1.7.14/release/featherlight.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/featherlight@1.7.14/release/featherlight.gallery.min.js"></script>

Для галереи необходимо использовать атрибут data-featherlight="image" и объединить элементы в группу через data-featherlight-gallery. Пример HTML:

<div class="gallery">
    <a href="img/photo1.jpg" data-featherlight="image" data-featherlight-gallery="gallery1">
        <img src="img/thumb1.jpg" alt="Фото 1">
    </a>
    <a href="img/photo2.jpg" data-featherlight="image" data-featherlight-gallery="gallery1">
        <img src="img/thumb2.jpg" alt="Фото 2">
    </a>
    <a href="img/photo3.jpg" data-featherlight="image" data-featherlight-gallery="gallery1">
        <img src="img/thumb3.jpg" alt="Фото 3">
    </a>
</div>

Каждый элемент галереи связывается через одинаковое значение data-featherlight-gallery, что позволяет перемещаться между изображениями внутри одного модального окна.

Инициализация и базовые настройки

Featherlight Gallery автоматически определяет элементы с одинаковым атрибутом data-featherlight-gallery. Для явной инициализации можно использовать jQuery:

$('.gallery a').featherlightGallery({
    previous: '←',    // Кнопка "Назад"
    next: '→',        // Кнопка "Вперед"
    galleryFadeIn: 300,  // Анимация появления изображения
    galleryFadeOut: 300  // Анимация скрытия изображения
});

Ключевые параметры:

  • previous и next — HTML или текст кнопок навигации.
  • openSpeed, closeSpeed — скорость анимации открытия/закрытия модального окна.
  • fadeIn, fadeOut — скорость появления/исчезновения содержимого.
  • startIndex — номер изображения, с которого открывается галерея.

Продвинутая кастомизация

1. Кастомная разметка модального окна

Featherlight позволяет менять структуру окна через template:

$.featherlightGallery.prototype.template = `
<div class="featherlight-gallery">
    <button class="featherlight-close">×</button>
    <div class="featherlight-content"></div>
    <button class="featherlight-prev">←</button>
    <button class="featherlight-next">→</button>
</div>`;

2. Отображение подписей к изображениям

Для подписи можно использовать атрибут title на ссылке:

<a href="img/photo1.jpg" data-featherlight="image" data-featherlight-gallery="gallery1" title="Описание фото 1">
    <img src="img/thumb1.jpg" alt="Фото 1">
</a>

В JavaScript можно отобразить подпись:

$.featherlightGallery.prototype.afterContent = function() {
    var title = this.$currentTarget.attr('title');
    if(title){
        $('<div class="featherlight-caption"></div>').text(title).appendTo(this.$instance);
    }
};

3. Автоматическое кэширование изображений

Featherlight может заранее подгружать соседние изображения для плавной навигации:

$.featherlightGallery.prototype.beforeNext = function(event) {
    var nextIndex = (this.current + 1) % this.$gallery.length;
    $('<img>').attr('src', this.$gallery.eq(nextIndex).attr('href'));
};

Управление событиями галереи

Featherlight поддерживает набор хуков для расширения функционала:

  • beforeOpen — перед открытием окна.
  • afterOpen — после открытия.
  • beforeClose — перед закрытием.
  • afterClose — после закрытия.
  • beforeNext / afterNext — при переходе к следующему изображению.
  • beforePrev / afterPrev — при переходе к предыдущему изображению.

Пример:

$('.gallery a').featherlightGallery({
    afterOpen: function(event){
        console.log('Галерея открыта');
    },
    afterClose: function(event){
        console.log('Галерея закрыта');
    }
});

Поддержка различных форматов

Featherlight Gallery не ограничивается только изображениями. Можно использовать HTML-контент, видео или iframe. Для галерей с видео:

<a href="https://www.youtube.com/embed/abc123" data-featherlight="iframe" data-featherlight-gallery="videos">
    Смотреть видео
</a>

Инициализация аналогична изображенческой галерее.

Оптимизация и производительность

  • Использовать минифицированные версии скриптов (featherlight.min.js), чтобы уменьшить вес страницы.
  • Для больших галерей рекомендуется динамически загружать изображения при переходе между слайдами.
  • Добавлять loading="lazy" к превью, чтобы ускорить начальную загрузку страницы.
  • Ограничить одновременное количество открытых галерей через проверку существующего экземпляра.

Адаптивность и стилизация

Featherlight наследует CSS свойства и поддерживает адаптивность. Основные правила:

.featherlight-gallery .featherlight-content img {
    max-width: 90vw;
    max-height: 80vh;
    display: block;
    margin: 0 auto;
}

.featherlight-caption {
    text-align: center;
    padding: 10px 0;
    font-size: 0.9em;
    color: #555;
}

.featherlight-prev, .featherlight-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 2em;
    background: rgba(0,0,0,0.3);
    color: #fff;
    border: none;
    cursor: pointer;
}
.featherlight-prev { left: 10px; }
.featherlight-next { right: 10px; }

Использование этих правил обеспечивает корректное отображение галереи на всех устройствах.

Поддержка навигации с клавиатуры

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

$(document).on('keydown', function(e){
    if($.featherlight.current){
        if(e.key === 'ArrowLeft') $.featherlight.current.prev();
        if(e.key === 'ArrowRight') $.featherlight.current.next();
        if(e.key === 'Escape') $.featherlight.current.close();
    }
});

Интеграция с динамическим контентом

Для галерей, где элементы добавляются после загрузки страницы, используется делегирование:

$(document).on('click', '.dynamic-gallery a', function(e){
    e.preventDefault();
    $(this).featherlightGallery();
});

Это позволяет работать с AJAX-загруженными изображениями или контентом, созданным через JavaScript.

Оглавление