Что такое Featherlight

Featherlight — это компактная JavaScript-библиотека для создания модальных окон (lightbox), ориентированная на минимальный размер, простоту подключения и предсказуемое поведение. Библиотека используется для отображения изображений, HTML-контента, iframe и данных, загружаемых по AJAX, поверх основного содержимого страницы без перезагрузки.

Ключевая особенность Featherlight — минимализм: библиотека не стремится быть универсальным UI-фреймворком, а решает одну задачу — показ легковесных модальных окон — максимально эффективно и без лишних зависимостей.

Архитектурные принципы

Featherlight построена вокруг нескольких базовых принципов:

  • Минимальный размер В сжатом виде библиотека занимает несколько килобайт, что делает её подходящей для проектов с жёсткими требованиями к производительности.

  • Зависимость только от jQuery Featherlight не использует сторонние плагины или сложные инфраструктурные решения. Вся функциональность опирается на jQuery и стандартный DOM API.

  • Декларативное использование Поведение lightbox может быть задано через HTML-атрибуты без написания JavaScript-кода.

  • Расширяемость Несмотря на компактность, библиотека поддерживает хуки, колбэки и переопределение поведения.

Базовая концепция lightbox

Lightbox в Featherlight — это динамически создаваемый DOM-элемент, который:

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

При открытии lightbox библиотека:

  1. Создаёт контейнер модального окна.
  2. Вставляет в него контент заданного типа.
  3. Добавляет затемняющий фон (overlay).
  4. Применяет стили и навешивает обработчики событий.

Типы поддерживаемого контента

Featherlight универсален по отношению к источнику данных. Поддерживаются следующие варианты.

HTML-контент

Модальное окно может отображать существующий HTML-элемент страницы:

<a href="#popup" data-featherlight>Открыть</a>

<div id="popup" style="display:none">
  <p>Любой HTML-контент</p>
</div>

Контент клонируется или перемещается в lightbox в зависимости от настроек.

Изображения

Featherlight автоматически распознаёт изображения по URL:

<a href="image.jpg" data-featherlight="image">Изображение</a>

Библиотека корректно обрабатывает размеры изображения, центрирование и масштабирование.

AJAX-загрузка

Контент может загружаться асинхронно:

<a href="content.html" data-featherlight="ajax">AJAX</a>

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

iframe

Поддержка iframe используется для внешних страниц, видео или встроенных сервисов:

<a href="https://example.com" data-featherlight="iframe">Iframe</a>

Инициализация и управление

Автоматическая инициализация

Featherlight активируется автоматически при наличии атрибута data-featherlight. Это позволяет использовать библиотеку без написания JavaScript-кода.

Программное создание

Lightbox может быть создан напрямую через Jav * aScript:

$.featherlight('<p>HTML из JavaScript</p>');

При таком подходе доступно полное управление параметрами и событиями.

Конфигурация и параметры

Featherlight поддерживает передачу настроек через объект конфигурации.

Основные параметры:

  • closeOnClick — закрытие по клику на overlay
  • closeOnEsc — закрытие по клавише Escape
  • openSpeed / closeSpeed — скорость анимации
  • variant — CSS-модификатор для кастомного оформления
  • persist — сохранять ли DOM-элемент между открытиями

Пример:

$.featherlight('<p>Контент</p>', {
  closeOnEsc: false,
  closeOnClick: 'background',
  variant: 'custom-lightbox'
});

События и хуки

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

Основные события:

  • beforeOpen
  • opened
  • beforeClose
  • closed

Пример подписки:

$(document).on('opened.featherlight', function () {
  // логика после открытия
});

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

Работа с CSS

Featherlight поставляется с минимальным CSS-файлом, который отвечает за:

  • позиционирование overlay;
  • центрирование lightbox;
  • базовую анимацию;
  • адаптацию под разные размеры экрана.

Кастомизация обычно выполняется через:

  • переопределение стандартных классов;
  • использование параметра variant;
  • добавление собственных CSS-правил.

Пример селектора:

.featherlight.custom-lightbox .featherlight-content {
  max-width: 800px;
  background: #fff;
}

Расширения и плагины

Featherlight имеет официальные расширения, такие как:

  • Featherlight Gallery — навигация по галерее изображений;
  • Featherlight No-jQuery (ограниченно) — экспериментальные сборки.

Галерея добавляет поддержку:

  • перелистывания;
  • клавиатурной навигации;
  • группировки элементов.

Производительность и ограничения

Featherlight оптимален для:

  • небольших и средних проектов;
  • лендингов;
  • административных интерфейсов;
  • статических сайтов.

Ограничения библиотеки:

  • зависимость от jQuery;
  • отсутствие сложной логики управления состоянием;
  • не предназначена для многоуровневых модальных систем.

Сравнение подхода Featherlight

В отличие от крупных UI-решений, Featherlight:

  • не навязывает архитектуру;
  • не требует инициализации компонентов;
  • легко читается и модифицируется;
  • подходит для точечного использования.

Библиотека следует философии «делать одно, но делать хорошо», что делает её устойчивым и понятным инструментом в экосистеме JavaScript.

Оглавление