Подключение в проекте на чистом JavaScript

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

Установка библиотеки

Основной способ использования BasicLightbox — подключение её через CDN или скачивание и размещение файлов на сервере. Рассмотрим оба варианта.

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

Для того чтобы подключить библиотеку через CDN, нужно добавить в HTML-файл ссылку на её CSS и JS файл. Обычно это делается в секции <head> для стилей и перед закрывающим тегом </body> для скриптов:

<head>
  <link href="https://cdn.jsdelivr.net/npm/basiclightbox@5.0.0/dist/basicLightbox.min.css" rel="stylesheet">
</head>
<body>
  <!-- Ваш основной контент -->
  
  <script src="https://cdn.jsdelivr.net/npm/basiclightbox@5.0.0/dist/basicLightbox.min.js"></script>
</body>

Локальное подключение

Для использования библиотеки локально её необходимо скачать с официального репозитория и разместить файлы на сервере. Это можно сделать, зайдя на страницу репозитория на GitHub (https://github.com/electerious/BasicLightbox) или скачать архив с последней версией.

После загрузки файлов, их нужно подключить в HTML так же, как и в случае с CDN:

<head>
  <link href="path/to/basicLightbox.min.css" rel="stylesheet">
</head>
<body>
  <!-- Ваш основной контент -->

  <script src="path/to/basicLightbox.min.js"></script>
</body>

Создание модального окна

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

Пример использования с изображением

Для начала, создадим элемент, который будет запускать модальное окно с изображением. В HTML создаём элемент для запуска окна:

<button id="openModal">Открыть изображение</button>

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

// Инициализация BasicLightbox
const basicLightbox = window.basicLightbox;

// Получение элемента кнопки
const openModalButton = document.getElementById('openModal');

// Функция открытия модального окна
openModalButton.addEventListener('click', () => {
  const instance = basicLightbox.create(`
    <img src="https://example.com/path/to/your/image.jpg" width="800" height="auto">
  `);

  instance.show();
});

Здесь создаётся кнопка, при нажатии на которую откроется модальное окно с изображением. Основной функцией является basicLightbox.create(), в которую передаётся HTML-контент модального окна.

Работа с HTML-контентом

Модальное окно может содержать не только изображения, но и любой HTML-контент. Например, можно использовать BasicLightbox для отображения текста или видео.

Пример с видео

Для отображения видео можно передать в create() HTML-разметку с тегом <video>:

openModalButton.addEventListener('click', () => {
  const instance = basicLightbox.create(`
    <video width="800" controls>
      <source src="https://example.com/path/to/your/video.mp4" type="video/mp4">
      Ваш браузер не поддерживает видео.
    </video>
  `);

  instance.show();
});

В этом примере при нажатии на кнопку откроется модальное окно с видеоплеером. Тег <video> поддерживает атрибуты управления воспроизведением, такие как controls, который позволяет пользователю управлять воспроизведением видео.

Закрытие модального окна

Модальное окно в BasicLightbox можно закрыть несколькими способами. Во-первых, оно автоматически закрывается, если кликнуть вне окна. Во-вторых, можно программно закрыть окно, вызвав метод close() на экземпляре окна.

Пример с кнопкой для закрытия

Допустим, у нас есть кнопка внутри модального окна для его закрытия. Мы добавляем её в разметку окна и программируем её действие:

openModalButton.addEventListener('click', () => {
  const instance = basicLightbox.create(`
    <div>
      <p>Это модальное окно с текстом.</p>
      <button id="closeButton">Закрыть</button>
    </div>
  `);

  const closeButton = instance.element().querySelector('#closeButton');
  closeButton.addEventListener('click', () => {
    instance.close();
  });

  instance.show();
});

Здесь создаётся кнопка внутри модального окна, которая при нажатии закроет это окно.

Дополнительные параметры и настройки

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

Управление закрытием при клике вне окна

По умолчанию модальное окно закрывается при клике вне его области. Если необходимо изменить это поведение, можно использовать параметр closable:

openModalButton.addEventListener('click', () => {
  const instance = basicLightbox.create(`
    <img src="https://example.com/path/to/your/image.jpg" width="800" height="auto">
  `, {
    closable: false // Окно не закроется при клике вне его области
  });

  instance.show();
});

Анимации при открытии и закрытии

BasicLightbox позволяет настраивать анимации появления и исчезновения окна. В библиотеке доступны различные способы анимации, включая изменение прозрачности и масштабирование. Это можно настроить через CSS классы, добавляемые библиотекой.

Для детальной настройки анимаций можно переопределить стандартные стили или добавить свои классы CSS. Например:

.basicLightbox {
  transition: opacity 0.3s ease;
}
.basicLightbox--visible {
  opacity: 1;
}
.basicLightbox--hidden {
  opacity: 0;
}

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

Заключение

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

Оглавление