Создание простой галереи

Веб-разработка активно использует модальные окна для отображения различных элементов, таких как изображения, видео и другие медиа-файлы. Одной из популярных библиотек для создания модальных окон в JavaScript является BasicLightbox. Эта библиотека предоставляет простой способ для реализации галереи изображений с плавным и приятным пользовательским интерфейсом.

Установка и настройка

Для начала необходимо подключить библиотеку BasicLightbox. Это можно сделать несколькими способами: через CDN или с помощью менеджеров пакетов, таких как npm.

Подключение через CDN

Для быстрого старта достаточно подключить библиотеку через CDN:

<script src="https://cdn.jsdelivr.net/npm/basiclightbox@5.0.0/dist/basicLightbox.min.js"></script>

Этот способ не требует установки дополнительных зависимостей и идеально подходит для небольших проектов.

Подключение через npm

Если проект использует npm или yarn, библиотеку можно установить следующим образом:

npm install basiclightbox

Или:

yarn add basiclightbox

После установки библиотеки её нужно импортировать в проект:

import basicLightbox from 'basiclightbox';

Структура галереи

Простейшая галерея изображений в HTML может выглядеть так:

<div class="gallery">
  <a href="image1.jpg"><img src="thumb1.jpg" alt="Image 1"></a>
  <a href="image2.jpg"><img src="thumb2.jpg" alt="Image 2"></a>
  <a href="image3.jpg"><img src="thumb3.jpg" alt="Image 3"></a>
</div>

Каждое изображение в галерее обёрнуто в ссылку (<a>), которая при клике будет открывать большое изображение.

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

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

const links = document.querySelectorAll('.gallery a');

links.forEach(link => {
  link.addEventListener('click', (event) => {
    event.preventDefault();

    const imageSrc = link.getAttribute('href');
    const modal = basicLightbox.create(`
      <img src="${imageSrc}" width="800" height="auto">
    `);

    modal.show();
  });
});

Описание работы кода

  1. Выбор всех ссылок: Сначала выбираются все элементы с классом gallery a, которые содержат ссылки на изображения.

  2. Обработчик события click: Для каждой ссылки добавляется обработчик события click, который предотвращает стандартное поведение ссылки (переход по адресу).

  3. Получение источника изображения: Из атрибута href извлекается путь к большому изображению, которое будет отображаться в модальном окне.

  4. Создание и отображение модального окна: С помощью basicLightbox.create() создаётся модальное окно, в котором вставляется изображение. Метод modal.show() отображает окно на экране.

Подключение стилей для галереи

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

.gallery {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.gallery a {
  display: block;
  width: 150px;
  height: 150px;
}

.gallery img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
  • Контейнер .gallery использует flexbox для размещения изображений в строку с промежутками.
  • Каждая ссылка внутри контейнера ограничена фиксированным размером, что позволяет создать одинаковые карточки для миниатюр.
  • Изображения автоматически подстраиваются под размер контейнера с помощью свойства object-fit.

Навигация по галерее

Если необходимо добавить возможность навигации между изображениями в модальном окне, можно расширить функциональность с помощью кнопок “предыдущее” и “следующее”. Для этого понадобится хранить ссылки на изображения в массиве и обрабатывать навигацию.

const galleryImages = Array.from(document.querySelectorAll('.gallery a'));

let currentIndex = 0;

const openModal = (index) => {
  const imageSrc = galleryImages[index].getAttribute('href');
  const modal = basicLightbox.create(`
    <div class="modal-content">
      <img src="${imageSrc}" width="800" height="auto">
      <button class="prev">Previous</button>
      <button class="next">Next</button>
    </div>
  `);

  modal.show();

  modal.element().querySelector('.prev').addEventListener('click', () => {
    currentIndex = (currentIndex - 1 + galleryImages.length) % galleryImages.length;
    openModal(currentIndex);
  });

  modal.element().querySelector('.next').addEventListener('click', () => {
    currentIndex = (currentIndex + 1) % galleryImages.length;
    openModal(currentIndex);
  });
};

galleryImages.forEach((link, index) => {
  link.addEventListener('click', (event) => {
    event.preventDefault();
    currentIndex = index;
    openModal(currentIndex);
  });
});

Объяснение работы

  1. Массив изображений: Все ссылки на изображения собираются в массив galleryImages. Это необходимо для того, чтобы можно было легко манипулировать индексами при навигации.

  2. Открытие модального окна: Функция openModal принимает индекс изображения и открывает соответствующее модальное окно.

  3. Навигация: Кнопки “предыдущее” и “следующее” позволяют переключаться между изображениями. При нажатии на кнопку обновляется индекс текущего изображения, и вызывается openModal с новым индексом.

  4. Циклический переход: Чтобы переходы между изображениями были цикличными, используются операторы %, которые возвращают индекс в пределах массива.

Дополнительные функции

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

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

const modal = basicLightbox.create(`
  <video controls>
    <source src="video.mp4" type="video/mp4">
    Your browser does not support the video tag.
  </video>
`);

modal.show();

В этом случае в модальном окне будет отображаться видеоплеер с кнопками управления воспроизведением.

Заключение

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

Оглавление