Программное управление галереей

Featherlight — это легковесная библиотека для создания модальных окон и галерей на JavaScript и jQuery. Для работы достаточно подключить CSS и JS-файлы библиотеки. Минимальный набор подключения выглядит следующим образом:

<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>

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

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

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

Пример структуры HTML:

<a href="img1.jpg" data-featherlight="image" data-featherlight-gallery="gallery">Изображение 1</a>
<a href="img2.jpg" data-featherlight="image" data-featherlight-gallery="gallery">Изображение 2</a>
<a href="img3.jpg" data-featherlight="image" data-featherlight-gallery="gallery">Изображение 3</a>

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

Программное открытие и закрытие

Featherlight предоставляет методы для управления модальными окнами программно. Создание экземпляра галереи через Jav * aScript:

var fl = $.featherlight('<img src="img1.jpg">');

После открытия модального окна можно закрыть его через метод close():

fl.close();

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

var gallery = $.featherlightGallery(['img1.jpg', 'img2.jpg', 'img3.jpg'], {
    startIndex: 1 // открывает второе изображение
});

Настройка параметров галереи

FeatherlightGallery поддерживает множество опций:

  • startIndex — индекс изображения, которое откроется первым.
  • previousIcon / nextIcon — кастомные иконки навигации.
  • openSpeed / closeSpeed — скорость анимации открытия и закрытия.
  • afterContent — функция обратного вызова после вставки контента, полезна для динамического контента.

Пример с настройкой:

$.featherlightGallery(['img1.jpg', 'img2.jpg', 'img3.jpg'], {
    startIndex: 0,
    nextIcon: '→',
    previousIcon: '←',
    openSpeed: 300,
    closeSpeed: 300,
    afterContent: function() {
        console.log('Контент загружен:', this.$currentTarget);
    }
});

Обработка событий

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

  • beforeOpen — перед открытием модального окна.
  • afterOpen — после открытия.
  • beforeClose — перед закрытием.
  • afterClose — после закрытия.

Пример подключения событий:

$(document).on('beforeOpen.fb', function(event){
    console.log('Модальное окно откроется:', event);
});

$(document).on('afterClose.fb', function(event){
    console.log('Модальное окно закрыто:', event);
});

Для галерей можно использовать события beforeNavigate и afterNavigate, чтобы выполнять действия при смене изображения.

Динамическое добавление элементов в галерею

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

var gallery = $.featherlightGallery([], { startIndex: 0 });

// Добавление нового изображения
gallery.$instances[0].items.push('img4.jpg');

// Перейти к новому изображению
gallery.goto(3);

Такой подход удобен для работы с контентом, загружаемым через AJAX.

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

CSS Featherlight легко переопределяется для изменения стиля модального окна или галереи:

.featherlight {
    background-color: rgba(0,0,0,0.9);
}

.featherlight .featherlight-content img {
    max-width: 90%;
    max-height: 80vh;
}

.featherlight .featherlight-next,
.featherlight .featherlight-previous {
    color: #fff;
    font-size: 2em;
}

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

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

Featherlight поддерживает любые HTML-элементы и AJAX-контент. Для загрузки изображений с сервера:

$.featherlight({
    ajax: 'image-list.html',
    afterContent: function() {
        console.log('Динамический контент загружен');
    }
});

Такой подход обеспечивает гибкую работу с галереями, когда изображения не известны на момент загрузки страницы.

Управление навигацией и индексами

FeatherlightGallery имеет встроенные методы next(), previous(), goto(index) для программного управления навигацией:

var gallery = $.featherlightGallery(['img1.jpg', 'img2.jpg', 'img3.jpg']);
gallery.next();       // следующее изображение
gallery.previous();   // предыдущее изображение
gallery.goto(2);      // третье изображение

Методы позволяют полностью контролировать поведение галереи без вмешательства пользователя.

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

Featherlight минимален по размеру, но при больших галереях рекомендуется:

  • Подгружать изображения по мере необходимости (lazy loading).
  • Использовать миниатюры для начального списка, открывая полноразмерные изображения только в модальном окне.
  • Ограничивать количество одновременно создаваемых экземпляров галереи, используя один глобальный объект для всех элементов.

Эти меры снижают нагрузку на DOM и повышают отзывчивость интерфейса.

Оглавление