Подключение зависимостей

Featherlight — это легковесная библиотека для создания модальных окон (lightbox) на JavaScript, которая строится поверх jQuery. Для корректной работы необходимо правильно подключить все зависимости и настроить среду.

jQuery как обязательная зависимость

Featherlight полностью зависит от jQuery. Любая версия jQuery начиная с 1.7 совместима, однако рекомендуется использовать актуальные стабильные версии (3.x), чтобы избежать конфликтов с современными браузерами и другими библиотеками.

Пример подключения jQuery через CDN:

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

Важно: <script> с jQuery должен располагаться до подключения Featherlight. Если порядок нарушен, библиотека не инициализируется, и любые вызовы $.featherlight() приведут к ошибке Uncaught ReferenceError: $ is not defined.

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

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

  1. CSS отвечает за стили модального окна, позиционирование, анимацию и внешний вид элементов.
  2. JavaScript содержит функционал открытия, закрытия и управления контентом lightbox.

Пример подключения через 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>

Можно использовать локальные копии файлов. В этом случае порядок подключения остается тем же: сначала CSS (для визуальных эффектов), затем JS (для логики).

Подключение расширений Featherlight

Featherlight поддерживает расширения для работы с изображениями, галереями, iframe и другими типами контента. Каждое расширение представляет отдельный JavaScript-файл и иногда CSS.

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

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

Расширения подключаются после основного файла featherlight.min.js. При этом порядок подключения нескольких расширений имеет значение: зависимости между ними должны соблюдаться, иначе возможны ошибки и некорректная работа функционала.

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

Featherlight хорошо сочетается с большинством современных JavaScript-библиотек, но следует учитывать несколько нюансов:

  • Использование jQuery в режиме noConflict требует вызова Featherlight через полностью квалифицированное имя:

    jQuery.featherlight('<p>Пример</p>');

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

Оптимизация подключения

Для минимизации времени загрузки рекомендуется:

  1. Подключать CSS и JS в конце <head> или перед закрывающим тегом </body> в зависимости от приоритетности визуальных эффектов.
  2. Использовать минифицированные версии файлов (.min.css и .min.js).
  3. Подключать Featherlight через CDN с возможностью кэширования.

Примеры базовой структуры HTML с подключенными зависимостями

<!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>

<a href="#demo-content" data-featherlight>Открыть модальное окно</a>

<div id="demo-content" style="display:none;">
    <h2>Содержимое модального окна</h2>
    <p>Пример текста.</p>
</div>

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

</body>
</html>

Ключевые моменты

  • jQuery обязателен и должен быть подключен до Featherlight.
  • CSS подключается перед JS для корректного отображения.
  • Расширения подключаются после основного JS-файла.
  • Минифицированные версии и CDN ускоряют загрузку и кэширование.
  • Проверка совместимости с другими библиотеками и режимом noConflict предотвращает конфликты.
Оглавление