Автоматическая группировка

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

Инициализация и базовое использование

Для начала необходимо подключить библиотеку и её зависимости:

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

Простейший пример вызова модального окна:

$('.open-modal').featherlight('<p>Содержимое модального окна</p>');

В этом случае при клике на элемент с классом open-modal откроется всплывающее окно с указанным содержимым.

Принцип автоматической группировки

Featherlight поддерживает группы элементов, которые позволяют объединять несколько элементов в одну галерею. Это реализуется с помощью атрибута data-featherlight и группового идентификатора data-featherlight-group.

Пример разметки для группы изображений:

<a href="image1.jpg" data-featherlight="image" data-featherlight-group="gallery">Изображение 1</a>
<a href="image2.jpg" data-featherlight="image" data-featherlight-group="gallery">Изображение 2</a>
<a href="image3.jpg" data-featherlight="image" data-featherlight-group="gallery">Изображение 3</a>

В этом примере все три ссылки объединены в одну группу gallery, что позволяет пользователю переключаться между изображениями с помощью навигации внутри модального окна.

Автоматическая группировка без явного указания

Featherlight позволяет автоматически создавать группы на основе общего признака элементов. Для этого используется настройка groupAttr, которая определяет, какой атрибут будет использоваться для группировки:

$.featherlight.defaults.groupAttr = 'data-gallery';

Пример разметки с автоматической группировкой:

<a href="image1.jpg" data-gallery="portfolio">Проект 1</a>
<a href="image2.jpg" data-gallery="portfolio">Проект 2</a>
<a href="image3.jpg" data-gallery="portfolio">Проект 3</a>

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

Навигация по группе

При группировке элементов появляется встроенная навигация. Featherlight добавляет стрелки “вперед” и “назад”, которые управляют переходом между элементами группы. Навигация работает как по клику, так и с помощью клавиатуры:

$.featherlight.defaults.closeOnEsc = true; // Закрытие по Escape
$.featherlight.defaults.previousIcon = '«'; // Значок назад
$.featherlight.defaults.nextIcon = '»';     // Значок вперед

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

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

Featherlight поддерживает добавление элементов в существующую группу на лету. Это особенно полезно, когда контент подгружается динамически через AJAX или создаётся через Jav * aScript:

$('#load-more').on('click', function() {
    const newItem = $('<a href="image4.jpg" data-gallery="portfolio">Проект 4</a>');
    $('body').append(newItem);
    newItem.featherlight({group: 'portfolio'});
});

В этом случае новый элемент автоматически включается в группу portfolio и становится доступен для навигации в модальном окне.

Пользовательские колбеки при группировке

Featherlight предоставляет события, которые позволяют управлять поведением при открытии, переключении и закрытии окон:

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

Пример использования колбека для группы:

$('a[data-gallery="portfolio"]').featherlight({
    afterNavigate: function(event) {
        console.log('Перешли на элемент группы:', this.$currentTarget.attr('href'));
    }
});

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

Настройка отображения группы

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

$.featherlight.defaults.template =
  '<div class="featherlight">' +
    '<button class="featherlight-close">×</button>' +
    '<div class="featherlight-content"></div>' +
    '<button class="featherlight-prev">«</button>' +
    '<button class="featherlight-next">»</button>' +
  '</div>';

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

Особенности производительности

При работе с большими группами изображений важно учитывать производительность:

  • Featherlight загружает контент по требованию, что уменьшает нагрузку на страницу.
  • Элементы группы можно лениво подгружать через AJAX, используя ajax-тип содержимого.
  • Рекомендуется ограничивать количество одновременных элементов в DOM для плавной анимации и быстрого отклика.
$('a[data-gallery="portfolio"]').featherlight({
    type: 'ajax',
    ajax: { cache: false }
});

Это обеспечивает динамическую подгрузку контента без повторного рендеринга всей страницы.

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

Оглавление