Миниатюры в галерее

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

Основы работы с BasicLightbox

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

Для начала нужно подключить саму библиотеку. Это можно сделать через CDN или скачав и подключив файл напрямую.

Подключение библиотеки

<link href="https://cdn.jsdelivr.net/npm/basiclightbox/dist/basicLightbox.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/basiclightbox/dist/basicLightbox.min.js"></script>

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

Создание миниатюр для изображений

Миниатюры изображений обычно генерируются заранее и отображаются в виде небольших изображений с помощью тега <img>. Чтобы создать галерею миниатюр, достаточно разместить несколько таких изображений на странице. К примеру:

<div class="gallery">
    <img src="image1_small.jpg" data-full="image1.jpg" alt="Image 1" class="thumbnail">
    <img src="image2_small.jpg" data-full="image2.jpg" alt="Image 2" class="thumbnail">
    <img src="image3_small.jpg" data-full="image3.jpg" alt="Image 3" class="thumbnail">
</div>

Здесь каждая миниатюра представлена изображением с классом .thumbnail, а атрибут data-full содержит путь к полному изображению. Такой подход позволяет эффективно загружать только миниатюры при начальной загрузке страницы, а полные изображения загружаются только при клике на соответствующую миниатюру.

Открытие изображения в модальном окне

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

Добавление обработчика кликов

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

document.querySelectorAll('.thumbnail').forEach(image => {
    image.addEventListener('click', (event) => {
        const fullImageSrc = event.target.getAttribute('data-full');
        
        const instance = basicLightbox.create(`
            <img src="${fullImageSrc}" alt="Full image">
        `);

        instance.show();
    });
});

Здесь мы выбираем все элементы с классом .thumbnail и добавляем обработчик события click. При клике на миниатюру извлекается атрибут data-full, который указывает на путь к полному изображению. Затем создается экземпляр модального окна с использованием метода basicLightbox.create(), и полное изображение отображается в модальном окне.

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

Модальное окно, созданное с помощью BasicLightbox, имеет несколько стандартных настроек, которые можно настроить под свои нужды. Библиотека позволяет легко изменять поведение окна, добавляя дополнительные опции.

Пример с анимацией закрытия

Можно добавить анимацию закрытия окна, чтобы улучшить пользовательский опыт. Для этого используем метод instance.close() и добавляем обработчик для закрытия по клику на фон:

document.querySelectorAll('.thumbnail').forEach(image => {
    image.addEventListener('click', (event) => {
        const fullImageSrc = event.target.getAttribute('data-full');
        
        const instance = basicLightbox.create(`
            <img src="${fullImageSrc}" alt="Full image">
        `, {
            onClose: () => console.log('Modal closed')
        });

        instance.show();
    });
});

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

Улучшение функционала с помощью CSS

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

Пример стилей для миниатюр

.thumbnail {
    width: 100px;
    height: 100px;
    object-fit: cover;
    cursor: pointer;
    transition: transform 0.3s ease-in-out;
}

.thumbnail:hover {
    transform: scale(1.1);
}

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

Оптимизация производительности

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

Также полезно использовать lazy loading для изображений, чтобы они загружались только тогда, когда пользователь прокручивает страницу до нужного места. Это можно реализовать с помощью атрибута loading="lazy":

<img src="image1_small.jpg" data-full="image1.jpg" alt="Image 1" class="thumbnail" loading="lazy">

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

Заключение

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

Оглавление