Открытие одиночных изображений

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

Подключение библиотеки

Для работы с Featherlight необходимо подключить jQuery и сами скрипт и стили Featherlight. Минимальный набор файлов выглядит следующим образом:

Важно соблюдать порядок подключения: сначала jQuery, затем Featherlight.

Открытие одиночного изображения

Featherlight позволяет открывать изображение по клику на ссылку или кнопку. Для этого необходимо указать ссылку на изображение и добавить атрибут data-featherlight с типом image (по умолчанию Featherlight определяет контент автоматически, но явное указание повышает читаемость кода):

Открыть изображение

В этом примере по клику на ссылку откроется модальное окно с указанным изображением. Featherlight автоматически добавляет затемнение фона и возможность закрытия по клику вне изображения или по клавише Esc.

Настройка параметров

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

  • targetAttr — атрибут ссылки, где хранится путь к контенту (по умолчанию href).
  • variant — класс модального окна для кастомного оформления.
  • closeOnClick — управление закрытием по клику на фон или контент ('anywhere', 'background', false).
  • closeIcon — HTML или символ кнопки закрытия.
  • afterOpen и afterClose — коллбеки, выполняемые после открытия и закрытия окна.

Пример с кастомными настройками:

$('a[data-featherlight="image"]').featherlight({
    variant: 'custom-lightbox',
    closeOnClick: 'background',
    afterOpen: function(event){
        console.log('Изображение открыто');
    },
    afterClose: function(event){
        console.log('Модальное окно закрыто');
    }
});

Работа с группами изображений

Даже при открытии одиночных изображений можно организовать навигацию между ними, объединяя ссылки в группы через атрибут data-featherlight-gallery:

Фото 1
Фото 2
Фото 3

Featherlight автоматически добавляет стрелки навигации, если несколько элементов имеют одинаковое значение галереи.

Динамическая загрузка изображений

Можно открывать изображения, создаваемые динамически через JavaScript. Например:

$('Динамическое изображение')
    .appendTo('body')
    .featherlight();

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

Адаптивность и стилизация

Featherlight автоматически масштабирует изображения по размеру окна, сохраняя пропорции. Для дополнительного контроля можно использовать CSS:

.featherlight .featherlight-content img {
    max-width: 90vw;
    max-height: 90vh;
    border-radius: 8px;
}

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

Закрытие и управление окнами

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

  • Клик по фону (если closeOnClick разрешён).
  • Кнопка закрытия (× или кастомная).
  • Клавиша Esc.
  • Вызов метода .featherlight('close') программно:
$.featherlight.close();

Применение событий

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

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

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

$('a[data-featherlight="image"]').on('afterOpen.fb', function(event){
    console.log('Изображение открыто через событие');
});

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

Оптимизация загрузки

Для повышения производительности рекомендуется использовать миниатюрные изображения для предварительного просмотра и загружать большие версии только при открытии модального окна. Featherlight корректно работает с href на большое изображение, а миниатюра может быть встроена в HTML:


    Миниатюра

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

Оглавление