Фильтр для изображений

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

Для инициализации модального окна используется метод .featherlight(), который может быть применён к любому элементу:

$('.image-link').featherlight({
    targetAttr: 'href',
    variant: 'image-modal'
});

Здесь targetAttr указывает атрибут, из которого загружается контент (например, href для изображений), а variant позволяет задавать кастомные стили для конкретного окна.

Отображение изображений

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

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

При вызове .featherlight() указанная картинка автоматически откроется в модальном окне с затемнённым фоном. По умолчанию окно адаптивное, центрированное и закрывается при клике вне области изображения или на кнопку закрытия.

Настройка модального окна

Featherlight позволяет гибко настраивать поведение и внешний вид модальных окон. Основные параметры:

  • variant — добавляет CSS-класс для индивидуального стилирования.
  • closeOnClick — определяет, закрывается ли окно при клике вне контента. Возможные значения: 'background', 'anywhere' или false.
  • closeOnEsc — логическое значение для закрытия окна клавишей Esc.
  • afterOpen, beforeClose — хуки для выполнения пользовательских функций до открытия или перед закрытием.

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

$('.image-link').featherlight({
    variant: 'custom-lightbox',
    closeOnClick: 'background',
    closeOnEsc: true,
    afterOpen: function() {
        console.log('Модальное окно открыто');
    },
    beforeClose: function() {
        console.log('Модальное окно закрывается');
    }
});

Галереи и навигация

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

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

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

  • previous / next — текст или HTML для кнопок навигации.
  • fadeIn / fadeOut — скорость анимации при открытии/закрытии.
  • loop — логическое значение для циклической навигации.

Поддержка фильтров и обработки изображений

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

.featherlight .custom-filter img {
    filter: grayscale(80%) brightness(1.2);
    transition: filter 0.3s ease;
}
.featherlight .custom-filter img:hover {
    filter: grayscale(0%) brightness(1);
}

Инициализация с применением класса фильтра:

$('.filtered-image').featherlight({
    variant: 'custom-filter'
});

Такой подход позволяет создавать интерактивные эффекты без сложного JavaScript-кода, используя только CSS-фильтры.

Динамическая загрузка контента

Featherlight поддерживает загрузку изображений и HTML-контента динамически через JavaScript. Это полезно при работе с API или асинхронными данными:

$.featherlight('<img src="dynamic-photo.jpg" alt="Динамическое изображение">', {
    variant: 'dynamic'
});

Можно комбинировать с jQuery AJAX для подгрузки изображений из сервера:

$.ajax({
    url: '/api/getImage',
    method: 'GET',
    success: function(data) {
        $.featherlight('<img src="' + data.url + '" alt="Загруженное изображение">', {
            variant: 'dynamic'
        });
    }
});

События и расширение функционала

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

  • open — срабатывает при открытии окна.
  • opened — после полной анимации открытия.
  • close — перед закрытием окна.
  • closed — после завершения закрытия.

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

$(document).on('featherlight-open', function(e) {
    console.log('Окно открылось:', e.target);
});

$(document).on('featherlight-close', function(e) {
    console.log('Окно закрывается:', e.target);
});

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

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

Featherlight автоматически центрирует окно и подстраивает его под размер контента. Дополнительная стилизация осуществляется через CSS-классы .featherlight и .featherlight-content. Для изменения внешнего вида модального окна применяются кастомные классы, заданные через variant:

.featherlight.custom-lightbox {
    background-color: rgba(0, 0, 0, 0.9);
    border-radius: 10px;
    padding: 20px;
}

.featherlight.custom-lightbox img {
    max-width: 90vw;
    max-height: 80vh;
    display: block;
    margin: 0 auto;
}

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

Итоговые возможности Featherlight

Featherlight объединяет лёгкость и гибкость при работе с модальными окнами и изображениями. Основные преимущества:

  • Простая интеграция и минимальный код.
  • Поддержка изображений, галерей и динамического контента.
  • Возможность кастомной стилизации через CSS и variant.
  • Система событий для расширения функционала.
  • Поддержка фильтров и эффектов через CSS.
  • Адаптивное отображение на любых устройствах.

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

Оглавление