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

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

Подключение библиотечных файлов

Для корректной работы Featherlight необходимо подключить два основных компонента:

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

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

<link href="https://cdn.jsdelivr.net/npm/featherlight@1.7.14/release/featherlight.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/featherlight@1.7.14/release/featherlight.min.js"></script>

Особенности подключения:

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

Инициализация модального окна

После подключения библиотечных файлов можно создавать модальные окна с помощью стандартного вызова:

$.featherlight('<p>Пример контента модального окна</p>');

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

Для открытия окна по клику на элемент используется синтаксис:

<a href="#inline-content" data-featherlight="inline">Открыть окно</a>
<div id="inline-content" style="display:none;">
  <h2>Содержимое окна</h2>
  <p>Текст или HTML-элементы</p>
</div>

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

  • Атрибут data-featherlight определяет тип содержимого. Варианты: inline, image, ajax.
  • href указывает на элемент, который будет отображаться в модальном окне при типе inline.

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

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

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

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

После подключения можно создавать галереи изображений:

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

Для активации галереи:

$('a[data-featherlight="image"]').featherlightGallery();

Особенности работы с расширениями:

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

Инициализация с опциями

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

$.featherlightGallery.prototype.defaults = {
    previous: '←',       // Символ для перехода к предыдущему изображению
    next: '→',           // Символ для перехода к следующему
    galleryFadeIn: 300,  // Время появления окна
    galleryFadeOut: 300  // Время исчезновения
};

Для модального окна без галереи:

$.featherlight('<p>Контент</p>', {
    closeIcon: '×',      // Кастомный значок закрытия
    openSpeed: 250,      // Скорость открытия
    closeSpeed: 250      // Скорость закрытия
});

Рекомендации по использованию опций:

  • Опции можно задавать глобально для всех окон или локально для конкретного вызова.
  • Для расширений конфигурационные параметры зависят от типа расширения (галерея, ajax, iframe).
  • Настройки анимации помогают интегрировать Featherlight в существующую стилистику сайта.

Подключение пользовательских расширений

Featherlight допускает создание собственных расширений. Структура расширения:

$.featherlight.myExtension = $.featherlight.extend({
    setup: function() {
        this._super();
        console.log('Расширение подключено');
    },
    afterContent: function() {
        this.$content.append('<p>Дополнительный текст</p>');
    }
});

И вызов расширения:

$.featherlight('<p>Основной контент</p>', { namespace: 'myExtension' });

Особенности пользовательских расширений:

  • Метод setup выполняется при инициализации окна.
  • Метод afterContent позволяет модифицировать контент после вставки в DOM.
  • Любое расширение должно вызываться через параметр namespace для корректной интеграции.

Итоговая схема подключения

  1. Подключение jQuery.
  2. Подключение featherlight.min.css.
  3. Подключение featherlight.min.js.
  4. Подключение необходимых расширений (gallery, ajax и др.).
  5. Инициализация модальных окон и расширений с опциями.

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

Оглавление