🍦 Vanilla JS Lightbox

В этом посте я хочу поделиться простым CSS и Vanilla JS Lightbox, который я использую для некоторых из моих проектов.

Вот демонстрационная страница GitHub:

👉 https://yossi-abramov.github.io/simple-lightbox.github.io/

И Репозиторий GitHub для проекта:

👉 https://github.com/yossi-abramov/simple-lightbox.github.io

HTML для этой демонстрации легко следовать, поэтому я не буду переходить на нее. Давайте рассмотрим соответствующие части CSS и JS кода.

CSS

В нашем лайтбоксе есть два состояния: скрытые и видимые. Начнем с скрытого состояния:

.lightbox{
    opacity: 0;
    visibility: hidden;
    position: fixed;
    left:0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: -1;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease-in;
}

Как видите, Lightbox находится в Исправлено положение и все свойства направления установлены на 0 . Это заставляет Lightbox заполнять весь экран без необходимости использования какого -либо вида ширина или высота характеристики. Эта стратегия позиционирования также может быть очень полезна в большей степени. Например, подумайте о создании наложения изображения. У вас может быть расположенный контейнер изображения относительный и .чрезмерно div позиционировал Абсолют Анкет Установив все свойства направления на 0 Вы можете убедиться, что наложение изображения полностью заполняет его родительский контейнер.

Стили для видимого состояния лайтбокса довольно просты:

.lightbox.show{
    background-color: rgba(0,0,0, 0.85);
    opacity: 1;
    visibility: visible;
    z-index: 1000;
}

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

JS

JavaScript для нашего Lightbox тоже довольно прост! В этом случае у нас есть три функции для покрытия:

• 1) Переключение между видимыми и скрытыми состояниями лайтбокса
• 2) Отображение изображения субъекта в лайтбоксе
• 3) Скрытие лайтбокса на каждом щелчке, которого нет на центре («субъект») изображения

document.addEventListener("DOMContentLoaded", () => {

    // ===> DOM elements <=== //

    const $imagesContainer = document.getElementById('images-container');
    const $lightbox = document.getElementById('lightbox');

    // ===> Event listeners and triggers <=== //

    // Show lightbox 
    $imagesContainer.addEventListener('click', e => {
        const imageWrapper = e.target.closest('.image-wrapper');

        if (imageWrapper) {
            const image = imageWrapper.querySelector('img');
            if (image) {
                $lightbox.innerHTML = '
' + image.outerHTML;
                $lightbox.classList.add('show');
            }
        }
    });

    // Hide Lightbox
    $lightbox.addEventListener('click', (e) => {
        if (!e.target.hasAttribute('src')) {
            $lightbox.classList.remove('show');
        }
    });
});

Для переключения между скрытыми и видимыми состояниями мы можем добавить/удалить .show класс. Мы могли бы использовать classlist.toggle () метод Но я нахожу это в этом случае, используя classlist.remove () и classlist.add () делает код более читабельным.

Чтобы показать Lightbox, я не хотел использовать статический элемент изображения и изменить его SRC и alt Свойства отдельно (подумайте обо всех атрибутах HTML, которые вы можете иметь на элементе изображения…). По этой причине я использую Image.outerhtml Анкет Но это только мое предложение для простой лайтбокса, и есть много способов ее реализации!

✍ Для получения дополнительной информации: https://yossiabramov.com/

Оригинал: “https://dev.to/yossiabramov/vanilla-js-lightbox-306h”