Загрузка библиотеки

Featherlight — компактная JavaScript-библиотека для реализации lightbox-окон. Для корректной работы требуется подключение CSS, JavaScript и библиотеки jQuery, так как Featherlight полностью на неё опирается.

Зависимость от jQuery

Featherlight не является нативной библиотекой и не работает без jQuery. Совместима с jQuery версии 1.7+, однако для современных проектов рекомендуется использовать актуальные версии 3.x.

Подключение jQuery выполняется строго до подключения Featherlight.

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>

Подключение файлов Featherlight

Featherlight состоит из двух основных файлов:

  • featherlight.min.css — стили lightbox
  • featherlight.min.js — логика отображения и управления

Подключение через CDN

Наиболее быстрый и распространённый способ — использование CDN.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/featherlight@1.7.14/release/featherlight.min.css">

<script src="https://cdn.jsdelivr.net/npm/featherlight@1.7.14/release/featherlight.min.js"></script>

Порядок подключения имеет критическое значение:

  1. jQuery
  2. CSS Featherlight
  3. JavaScript Featherlight

Нарушение порядка приводит к ошибкам и неработоспособности lightbox.

Локальное подключение библиотеки

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

Структура файлов

/assets
  /css
    featherlight.min.css
  /js
    featherlight.min.js
    jquery.min.js

HTML-подключение

<link rel="stylesheet" href="/assets/css/featherlight.min.css">

<script src="/assets/js/jquery.min.js"></script>
<script src="/assets/js/featherlight.min.js"></script>

Локальное подключение даёт полный контроль над версией библиотеки и исключает зависимость от CDN.

Проверка корректности загрузки

После подключения Featherlight автоматически регистрирует глобальный объект $.featherlight.

Минимальная проверка в консоли браузера:

typeof $.featherlight

Корректная загрузка возвращает значение "function".

Подключение дополнительных модулей

Featherlight поддерживает расширения (галереи, iframe, видео, AJAX-контент). Они подключаются после основного файла библиотеки.

Пример подключения галереи:

<script src="https://cdn.jsdelivr.net/npm/featherlight@1.7.14/release/featherlight.gallery.min.js"></script>

И соответствующий CSS:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/featherlight@1.7.14/release/featherlight.gallery.min.css">

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

Совместимость с модульными сборщиками

Featherlight не предназначен для ES-модулей из коробки, однако может использоваться в сборках Webpack, Vite и аналогичных инструментов через глобальное подключение jQuery.

Принципиальные особенности:

  • библиотека ожидает window.jQuery
  • import без дополнительной настройки не работает
  • рекомендуется подключение через ProvidePlugin (Webpack)

Пример для Webpack:

new webpack.ProvidePlugin({
  $: 'jquery',
  jQuery: 'jquery'
});

После этого Featherlight может быть импортирован как обычный скрипт.

Особенности загрузки в SPA-приложениях

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

Рекомендуемый подход:

  • подключение Featherlight в основном HTML-шаблоне
  • использование только API и data-атрибутов при навигации между состояниями

Минимальный пример корректной загрузки

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <title>Featherlight</title>

  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/featherlight@1.7.14/release/featherlight.min.css">
</head>
<body>

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/featherlight@1.7.14/release/featherlight.min.js"></script>

</body>
</html>

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

Оглавление