Первый лайтбокс

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

Лайтбокс в Featherlight создаётся на основе объекта jQuery, что делает его совместимым с большинством современных проектов. Каждый вызов библиотеки создаёт динамический контейнер, который накладывается поверх страницы и управляется внутренними методами.

Подключение и базовая инициализация

Featherlight требует подключение jQuery и самой библиотеки:

<link href="featherlight.min.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="featherlight.min.js"></script>

Базовая инициализация выполняется с помощью вызова метода .featherlight() на элементе-селекторе:

$('a.lightbox').featherlight();

В этом примере все ссылки с классом lightbox будут открывать содержимое в модальном окне. Featherlight автоматически определяет тип содержимого: изображение, HTML-код или AJAX-запрос.

Работа с различными типами контента

Featherlight поддерживает несколько вариантов содержимого:

Изображения

Простейший случай — открытие изображений по ссылке:

<a href="image.jpg" class="lightbox">Открыть изображение</a>

Featherlight автоматически создаёт <img> внутри модального окна. Можно добавить настройку размеров:

$.featherlight.defaults.openSpeed = 300; // скорость открытия в мс
$.featherlight.defaults.closeSpeed = 200; // скорость закрытия в мс

HTML-контент

Для вставки HTML-кода используется атрибут data-featherlight:

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

<div id="inline-content" style="display:none;">
  <h2>Пример HTML-контента</h2>
  <p>Можно использовать любой HTML, включая формы и таблицы.</p>
</div>

Контент из скрытого блока автоматически клонируется в модальное окно.

AJAX-запросы

Для динамического получения данных используется опция ajax:

$.featherlight('/content.html', {
    ajax: { type: 'GET', dataType: 'html' }
});

Featherlight создаёт модальное окно и загружает содержимое через AJAX, сохраняя возможность закрытия и навигации.

Настройка поведения лайтбокса

Featherlight предоставляет обширный набор опций для тонкой настройки:

  • closeOnClick: закрытие при клике вне содержимого (true/false)
  • closeOnEsc: закрытие по клавише ESC
  • persist: оставлять содержимое между открытием и закрытием
  • targetAttr: атрибут, содержащий путь к контенту (href по умолчанию)

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

$('a.lightbox').featherlight({
    closeOnClick: 'background',
    closeOnEsc: true,
    persist: true
});

Работа с событиями

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

  • beforeOpen: вызывается перед открытием окна
  • afterOpen: после открытия
  • beforeClose: перед закрытием
  • afterClose: после закрытия

Пример:

$.featherlight.defaults.beforeOpen = function(event){
    console.log('Лайтбокс готовится к открытию');
};

События можно назначать индивидуально для каждого элемента:

$('a.lightbox').featherlight({
    afterClose: function(){
        alert('Лайтбокс закрыт');
    }
});

Кастомизация стилей

Featherlight использует CSS-классы для оформления:

  • .featherlight — основной контейнер
  • .featherlight-content — блок с контентом
  • .featherlight-close — кнопка закрытия
  • .featherlight-overlay — полупрозрачный фон

Стили можно переопределять для создания уникального интерфейса. Например:

.featherlight {
    border-radius: 8px;
    background-color: #fff;
    box-shadow: 0 4px 20px rgba(0,0,0,0.5);
}
.featherlight-overlay {
    background-color: rgba(0,0,0,0.8);
}

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

Открытие и закрытие лайтбокса можно выполнять через API:

// открыть с HTML-контентом
$.featherlight('<p>Программное открытие</p>');

// закрыть текущее окно
$.featherlight.current().close();

Также поддерживается получение текущего контента и манипуляции с ним:

var content = $.featherlight.current().$content;
content.append('<p>Дополнительный текст</p>');

Расширение функционала через плагины

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

  • Featherlight Gallery — для создания галерей изображений с навигацией
  • Featherlight Iframe — для открытия внешних страниц в iframe
  • Featherlight Config — для глобальной конфигурации всех лайтбоксов на странице

Пример галереи:

$('.gallery a').featherlightGallery({
    previous: '←',
    next: '→',
    galleryFadeIn: 300
});

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

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

  • Загружается один CSS-файл и один JS-файл.
  • Контент создаётся динамически, DOM не засоряется.
  • Поддержка делегирования событий позволяет обрабатывать элементы, добавленные после загрузки страницы:
$(document).on('click', 'a.lightbox', $.featherlight);

Это особенно важно при работе с динамическими интерфейсами и большим количеством изображений.

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

Оглавление