Галереи изображений

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

Структура HTML для галереи

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

<div class="gallery">
    <div class="gallery-item">
        <img src="image1.jpg" alt="Image 1" class="thumbnail" data-modal-target="modal1">
    </div>
    <div class="gallery-item">
        <img src="image2.jpg" alt="Image 2" class="thumbnail" data-modal-target="modal2">
    </div>
    <div class="gallery-item">
        <img src="image3.jpg" alt="Image 3" class="thumbnail" data-modal-target="modal3">
    </div>
</div>

<!-- Модальные окна для изображений -->
<div id="modal1" class="modal" aria-hidden="true">
    <div class="modal-overlay" tabindex="-1">
        <div class="modal-container">
            <img src="image1.jpg" alt="Image 1" class="modal-image">
            <button class="modal-close" aria-label="Close" data-modal-close>Закрыть</button>
        </div>
    </div>
</div>

В этом примере для каждого изображения используется атрибут data-modal-target, который указывает на соответствующее модальное окно. Модальные окна скрыты по умолчанию и появляются только при активации.

Инициализация и использование Micromodal

После того как разметка готова, необходимо подключить и настроить библиотеку Micromodal. Для этого достаточно подключить её через CDN или через локальные файлы.

<script src="https://unpkg.com/micromodal@0.4.6/dist/micromodal.min.js"></script>

Теперь, для того чтобы модальные окна работали, нужно инициализировать библиотеку в Jav * aScript:

Micromodal.init({
    disableScroll: true,      // Отключение прокрутки страницы при открытии модального окна
    disableFocus: true,       // Запрещает фокусировку на элементах страницы, когда модальное окно открыто
    awaitCloseAnimation: true // Ожидание анимации закрытия перед продолжением взаимодействия с DOM
});

Активация модального окна

Micromodal автоматически отслеживает клики на элементы, которые содержат атрибут data-modal-target. Когда пользователь кликает на миниатюру изображения, модальное окно с соответствующим id будет открыто. Важно, чтобы каждому изображению соответствовало уникальное модальное окно, что гарантирует правильную работу библиотеки.

Переключение между изображениями в галерее

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

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

<button class="modal-prev" data-modal-prev>Предыдущее</button>
<button class="modal-next" data-modal-next>Следующее</button>

Затем, для переключения изображений, можно добавить обработчики событий в Jav * aScript:

const modalPrev = document.querySelector('.modal-prev');
const modalNext = document.querySelector('.modal-next');

modalPrev.addEventListener('click', function() {
    // Логика для переключения на предыдущее изображение
    showImage('previous');
});

modalNext.addEventListener('click', function() {
    // Логика для переключения на следующее изображение
    showImage('next');
});

function showImage(direction) {
    const currentImage = document.querySelector('.modal-image');
    let newImage;

    if (direction === 'next') {
        newImage = currentImage.nextElementSibling || document.querySelector('.gallery-item:first-child img');
    } else {
        newImage = currentImage.previousElementSibling || document.querySelector('.gallery-item:last-child img');
    }

    currentImage.src = newImage.src;
    currentImage.alt = newImage.alt;
}

В этом коде используется простая логика для поиска следующего или предыдущего изображения в галерее и замены текущего изображения в модальном окне. Это позволяет пользователю беспрепятственно перемещаться по галерее.

Стилизация

Для того чтобы галерея изображений и модальные окна выглядели красиво и были удобны в использовании, потребуется добавить стили. Micromodal использует базовые стили, но для конкретных нужд можно настроить их под себя. Например, можно задать стили для контейнера модального окна и изображения:

.modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    align-items: center;
    justify-content: center;
}

.modal-container {
    position: relative;
    max-width: 80%;
    max-height: 80%;
    background-color: white;
    padding: 20px;
    border-radius: 5px;
}

.modal-image {
    max-width: 100%;
    max-height: 80vh;
    display: block;
    margin: 0 auto;
}

.modal-prev, .modal-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
    border: none;
    padding: 10px;
    cursor: pointer;
}

.modal-prev {
    left: 10px;
}

.modal-next {
    right: 10px;
}

Здесь задаются стили для модального окна, его контейнера и изображений внутри. Также добавлены кнопки навигации с базовой стилизацией.

Завершение работы с Micromodal

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

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