Навигация между элементами

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

Featherlight использует jQuery в качестве основы, что обеспечивает совместимость с большинством существующих веб-проектов. Управление модальными окнами происходит через вызов метода $.featherlight(content, options), где content может быть HTML, селектором или функцией, а options — объект настроек.

Навигация между элементами

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

Создание галереи

Для организации группы элементов в галерею используется атрибут data-featherlight и класс объединения элементов. Пример:

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

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

$('.gallery').featherlight({
    group: 'myGallery'
});

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

Методы навигации

Featherlight предоставляет методы для перехода между элементами внутри группы:

  • next() — перемещает к следующему элементу.
  • prev() — перемещает к предыдущему элементу.

Применение методов осуществляется через объект модального окна:

var fl = $.featherlight($('.gallery').first());
fl.next(); // Переход к следующему элементу
fl.prev(); // Переход к предыдущему элементу

Также можно слушать события для кастомной навигации:

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

Настройка цикла

Для галерей часто требуется, чтобы навигация была цикличной: при достижении последнего элемента следующий — первый. В Featherlight это реализуется через параметр loop:

$('.gallery').featherlight({
    group: 'myGallery',
    loop: true
});

При loop: true навигация не прекращается на границах группы, а продолжается по кругу.

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

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

$(document).on('click', '.new-item', function() {
    $(this).featherlight({
        group: 'myGallery'
    });
});

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

Пользовательские элементы управления

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

<button id="prev">Назад</button>
<button id="next">Вперед</button>
$('#next').on('click', function() { fl.next(); });
$('#prev').on('click', function() { fl.prev(); });

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

$(document).on('featherlightOpened', function(event) {
    var flInstance = $.featherlight.current();
    flInstance.$content.append('<div class="custom-nav"><button class="prev">Prev</button><button class="next">Next</button></div>');
    flInstance.$content.find('.next').on('click', function() { flInstance.next(); });
    flInstance.$content.find('.prev').on('click', function() { flInstance.prev(); });
});

Настройка анимации при переходе

Featherlight позволяет задать анимацию для переходов между элементами. Для этого используются CSS-классы и параметры openSpeed и closeSpeed:

$('.gallery').featherlight({
    group: 'myGallery',
    openSpeed: 300,
    closeSpeed: 300
});

Можно комбинировать с CSS-переходами для плавного эффекта смены контента.

События навигации

Для гибкого контроля навигации можно использовать события:

  • featherlightBeforeNext — перед переходом к следующему элементу.
  • featherlightAfterNext — после перехода к следующему элементу.
  • featherlightBeforePrev — перед переходом к предыдущему элементу.
  • featherlightAfterPrev — после перехода к предыдущему элементу.

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

$(document).on('featherlightAfterNext', function(e) {
    console.log('Перешли к следующему элементу');
});

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

Резюме навигации

  • Атрибут data-featherlight и класс объединяют элементы.
  • Опция group создает навигационную цепочку.
  • Методы next() и prev() управляют переходами.
  • Опция loop обеспечивает цикличность.
  • Поддерживаются динамически добавленные элементы.
  • Можно создавать собственные элементы управления и подключать события для кастомной логики.
  • Настраиваются скорость и анимация переходов между элементами.

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

Оглавление