Параметры галереи

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

Основные опции галереи

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

  • gallery — включает галерею для набора элементов. Если указано true или задан CSS-селектор, все элементы, соответствующие селектору, будут объединены в одну галерею.

    $('.gallery-item').featherlightGallery({ gallery: true });

  • openSpeed и closeSpeed — скорость анимации открытия и закрытия окна в миллисекундах. Поддерживается значение 0 для мгновенного отображения.

    $.featherlightGallery.defaults.openSpeed = 300;
$.featherlightGallery.defaults.closeSpeed = 200;

  • previousIcon и nextIcon — HTML-символы или элементы для кнопок навигации между изображениями. По умолчанию используются стрелки.

    $.featherlightGallery.defaults.previousIcon = '◀'; // стрелка влево
$.featherlightGallery.defaults.nextIcon = '▶';     // стрелка вправо

  • fadeIn и fadeOut — альтернативные параметры для задания плавности переходов при открытии и закрытии модального окна. Они могут использоваться вместо openSpeed и closeSpeed для более гибкой анимации.

Навигация в галерее

FeatherlightGallery поддерживает клавиатурную навигацию и навигацию через интерфейсные элементы. Основные методы и события:

  • next() — переход к следующему элементу галереи.
  • previous() — возврат к предыдущему элементу.
  • $.featherlightGallery.current() — получение текущего активного элемента.

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

  • beforeOpen — вызывается перед открытием модального окна. Используется для подгрузки динамического контента.
  • afterClose — вызывается после закрытия, полезно для очистки ресурсов или сброса состояния.

Управление содержимым галереи

FeatherlightGallery автоматически обрабатывает содержимое по CSS-селектору или переданному массиву. Поддерживаются типы контента:

  • Изображения — основное назначение галерей. Поддерживаются форматы .jpg, .png, .gif и другие.
  • HTML-контент — можно создавать галерею из блоков div или других элементов.
  • AJAX-контент — динамическая подгрузка данных с сервера через AJAX.

Пример инициализации галереи с HTML-контентом:

$('.gallery-item').featherlightGallery({
  gallery: {
    fadeIn: 300,
    fadeOut: 200,
    previousIcon: '<',
    nextIcon: '>',
    keyboard: true
  },
  beforeOpen: function(event){
    console.log('Открытие элемента галереи', this);
  }
});

Пользовательские настройки и переопределение

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

  • На уровне страницы:

    $.featherlightGallery.defaults.nextIcon = '→';
$.featherlightGallery.defaults.previousIcon = '←';

  • На уровне конкретного вызова:

    $('.gallery-item').featherlightGallery({
  gallery: true,
  openSpeed: 400,
  closeSpeed: 250
});

Можно комбинировать параметры галереи с обычными опциями Featherlight, такими как closeOnEsc, closeOnClick, targetAttr.

События и расширения

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

  • onStart — срабатывает при запуске галереи, до отображения первого элемента.
  • onEnd — вызывается после закрытия последнего элемента.
  • onNavigate — событие навигации между элементами, передается индекс текущего и следующего элемента.

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

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

  • Для больших галерей рекомендуется использовать ленивую загрузку изображений через data-featherlight или src с динамической подгрузкой.
  • Минимизировать использование тяжелого HTML-контента для элементов галереи, чтобы не нагружать DOM.
  • Использовать кеширование AJAX-запросов при динамическом контенте.

Совместимость и расширяемость

FeatherlightGallery полностью совместим с jQuery и работает на всех современных браузерах. Архитектура плагина позволяет создавать собственные расширения, например, для:

  • Автопрокрутки галереи.
  • Добавления подписей к изображениям.
  • Интеграции с адаптивной версткой и touch-событиями.

Расширения создаются через переопределение методов плагина и добавление новых событий.

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

Оглавление