Легковесный lightbox плагин — Luminous

Здравствуйте, уважаемые читатели XoZbloga! Давайте знакомиться с простым, легковесным плагином lightbox изображений от imgix — Luminous. Данный плагин отлично подойдет для блога на WordPress. Ниже приведен живой пример использования плагина.

Клик по картинке:

See the Pen Ywmoyz by Dmitry (@xozblog) on CodePen.

Подключение и использование

Подключение заключается как минимум в использовании файла плагина luminous.min.js или luminous.js, как максимум подключении стилей для оформления.

Разметка HTML для использования выглядит следующим образом:

1
2
3
<a href="../images/snow_640.jpg">
  <img src="../images/snow_350.jpg">
</a>

Размещается тег изображения с миниатюрой картинки, обернутый в ссылку на оригинал. Аналогично как в WordPress при добавлении изображений в текст поста.

С помощью оператора new создаем новый экземпляр объекта, в качестве селектора используем тег a:

1
new Luminous(document.querySelector('a'));

Вы также можете использовать дополнительные опции плагина.

Дополнительные опции

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
var options = {
    // Префикс для сгенерированных классов (например `my-ns`
    // в результате получится `my-ns-lightbox`.
    // По-умолчанию префикс классов `lum-` добавляется автоматически.
    namespace: null,
    // Атрибут в котором указан источник на основное изображения.
    sourceAttribute: 'href',
    // Атрибут в котором указан заголовок.
    captionAttribute: null,
    // Триггер открытия.
    openTrigger: 'click',
    // Триггер закрытия.
    closeTrigger: 'click',
    // Разрешить закрытие с помощью клавиши escape.
    closeWithEscape: true,
    // Автоматически закрывать при прокрутке страницы.
    closeOnScroll: false,
    // Селектор определяющий в какой элемент будет добавлен lightbox.
    appendToSelector: 'body',
    // Указанная функция будет вызвана при открытии lightbox.
    onOpen: null,
    // Указанная функция будет вызвана при закрытии lightbox.
    onClose: null,
    // Если true, добавляется `imgix-fluid` класс для элемента `img`.
    includeImgixJSClass: false,
    // Использование базовых стилей оформления.
    injectBaseStyles: true,
};

new Luminous(document.querySelector('a'), options);

Оформление

По умолчанию Luminous использует базовый набор стилей. Существует уже готовая основная тема, которая может удовлетворить вашим потребностям, или по крайней мере дать хороший пример того, как стоит делать собственные стили. Опцию плагин namespace можно использовать как способ легко применить различные темы для конкретных случаев.

Если вам нужно сделать что-то очень необычное, или вы просто предпочитаете использовать стили по умолчанию в CSS, вы можете передать в опцию injectBaseStyles значение false при создании нового экземпляра Luminous. Обратите внимание, что при отключении базовых стилей, вы все равно должны обеспечить анимацию для .lum-lightbox.lum-opening и .lum-lightbox.lum-closing (пример описания анимации есть в базой теме).

Чтобы оставаться в курсе свежих статей и уроков подписывайтесь на еженедельную почтовую рассылку или на новостную ленту RSS. Спасибо!