Навигация между изображениями

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

Основные принципы

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

1. Переключение через кнопки

Для навигации с помощью кнопок необходимо создать кнопки «Предыдущее» и «Следующее», которые будут изменять контент модального окна. Эти кнопки будут связаны с функциями, которые изменяют источник изображения, отображаемого в модальном окне.

Пример реализации:

const images = [
  'image1.jpg',
  'image2.jpg',
  'image3.jpg'
];

let currentIndex = 0;

const lightbox = basicLightbox.create(`
  <img src="${images[currentIndex]}" width="800" height="600">
  <button class="prev">Previous</button>
  <button class="next">Next</button>
`);

document.querySelector('.prev').addEventListener('click', () => {
  currentIndex = (currentIndex - 1 + images.length) % images.length;
  lightbox.element().querySelector('img').src = images[currentIndex];
});

document.querySelector('.next').addEventListener('click', () => {
  currentIndex = (currentIndex + 1) % images.length;
  lightbox.element().querySelector('img').src = images[currentIndex];
});

lightbox.show();

В этом примере создается массив с путями изображений и переменная для отслеживания текущего индекса. Каждая кнопка (предыдущая и следующая) изменяет источник изображения на основе текущего индекса, при этом учитывается цикличность (после последнего изображения снова отображается первое и наоборот).

2. Переключение с помощью клавиш

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

Пример добавления горячих клавиш:

const images = [
  'image1.jpg',
  'image2.jpg',
  'image3.jpg'
];

let currentIndex = 0;

const lightbox = basicLightbox.create(`
  <img src="${images[currentIndex]}" width="800" height="600">
`);

document.addEventListener('keydown', (event) => {
  if (event.key === 'ArrowRight') {
    currentIndex = (currentIndex + 1) % images.length;
  } else if (event.key === 'ArrowLeft') {
    currentIndex = (currentIndex - 1 + images.length) % images.length;
  }
  
  lightbox.element().querySelector('img').src = images[currentIndex];
});

lightbox.show();

В этом примере добавляется обработчик события нажатия клавиш. При нажатии стрелки вправо индекс изображения увеличивается, а при нажатии стрелки влево — уменьшается. Как и в предыдущем примере, изображение обновляется с учетом цикличности.

3. Поддержка закрытия при клике вне окна

Для улучшения взаимодействия с пользователем можно добавить функционал закрытия модального окна при клике на область вне его. Это также влияет на общую удобство использования навигации, позволяя быстро закрыть окно, не нажав на кнопку «Закрыть».

const images = [
  'image1.jpg',
  'image2.jpg',
  'image3.jpg'
];

let currentIndex = 0;

const lightbox = basicLightbox.create(`
  <img src="${images[currentIndex]}" width="800" height="600">
`, {
  onClose: () => {
    console.log('Lightbox closed');
  }
});

lightbox.show();

lightbox.element().addEventListener('click', (event) => {
  if (event.target === lightbox.element()) {
    lightbox.close();
  }
});

В данном примере при клике на саму модальную область (вне изображения) окно закрывается. Это помогает улучшить интерактивность и уменьшить количество лишних кликов.

4. Кастомизация навигационных кнопок

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

Пример кастомных кнопок с CSS:

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

  .prev {
    left: 10px;
  }

  .next {
    right: 10px;
  }

  .prev:hover, .next:hover {
    background-color: rgba(0, 0, 0, 0.8);
  }
</style>

Этот код создает кнопки с черным полупрозрачным фоном, белым текстом и эффектом изменения фона при наведении. Расположение кнопок фиксируется с помощью position: absolute, что позволяет им быть всегда по бокам изображения.

5. Важные моменты

  • Цикличность навигации: При переходе между изображениями важно предусмотреть возможность цикличности, чтобы пользователь не застревал на первом или последнем изображении.
  • Гибкость API: Библиотека позволяет легко интегрировать навигацию с другими элементами, такими как галереи с динамически загружаемыми изображениями, что делает ее мощным инструментом для создания интерактивных слайд-шоу.
  • Поддержка мобильных устройств: На мобильных устройствах навигация может быть реализована с помощью жестов (свайпов), что значительно улучшает пользовательский опыт.

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

Оглавление