Ручная установка из исходников

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

Шаг 1: Загрузка исходников библиотеки

Для начала необходимо скачать исходники библиотеки BasicLightbox. Репозиторий библиотеки доступен на GitHub. Для загрузки можно воспользоваться Git или скачать архив с исходниками.

1.1. Клонирование репозитория через Git:

git clone https://github.com/electerious/basiclightbox.git

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

1.2. Загрузка архива:

Перейдите по ссылке https://github.com/electerious/basiclightbox/releases, выберите нужную версию и скачайте архив. После этого распакуйте его в удобное место на вашем диске.

Шаг 2: Подключение библиотеки к проекту

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

2.1. Подключение через локальные файлы:

Из исходников библиотеки можно использовать два файла: CSS для стилизации и JavaScript для логики работы.

  1. Скопируйте файлы basicLightbox.min.css и basicLightbox.min.js в папку вашего проекта (например, libs/basicLightbox/).
  2. Подключите их в HTML-файле:
<link rel="stylesheet" href="libs/basicLightbox/basicLightbox.min.css">
<script src="libs/basicLightbox/basicLightbox.min.js"></script>

Убедитесь, что пути к файлам указаны правильно относительно структуры вашего проекта.

2.2. Подключение через сборщики модулей:

Если вы используете систему сборки типа Webpack, Parcel или другую, можно импортировать библиотеку через Jav * aScript:

import basicLightbox from 'libs/basicLightbox/basicLightbox.min.js';
import 'libs/basicLightbox/basicLightbox.min.css';

Шаг 3: Инициализация и использование

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

3.1. Простое модальное окно с изображением

Основная цель BasicLightbox — это создание модальных окон, в которых можно отображать изображения. Для этого необходимо передать HTML-разметку в функцию basicLightbox.create().

const lightbox = basicLightbox.create(`
  <img src="path/to/your/image.jpg" width="800" height="600">
`);
lightbox.show();

Этот код создаст модальное окно с изображением, которое будет открыто при вызове lightbox.show().

3.2. Модальное окно с видео

BasicLightbox поддерживает не только изображения, но и видео. Для отображения видео можно передать HTML-разметку для видеоплеера:

const lightbox = basicLightbox.create(`
  <video width="800" height="600" controls>
    <source src="path/to/your/video.mp4" type="video/mp4">
  </video>
`);
lightbox.show();

Этот код создаст модальное окно с видеоплеером и возможностью управления воспроизведением.

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

Модальные окна, созданные с помощью BasicLightbox, можно закрыть, вызвав метод lightbox.close():

lightbox.close();

Этот метод скрывает модальное окно.

Шаг 4: Кастомизация и параметры

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

4.1. Параметры и стили

При создании модального окна можно указать дополнительные параметры:

  • onShow — колбэк-функция, которая будет вызвана после показа модального окна.
  • onClose — колбэк-функция, которая будет вызвана после закрытия модального окна.

Пример с использованием колбэков:

const lightbox = basicLightbox.create(`
  <img src="path/to/your/image.jpg" width="800" height="600">
`, {
  onShow: (instance) => console.log('Окно открыто'),
  onClose: (instance) => console.log('Окно закрыто')
});
lightbox.show();

4.2. Управление клавишами

BasicLightbox поддерживает закрытие модальных окон с помощью клавиши Escape. Это поведение можно настроить или отключить, передав параметр closable:

const lightbox = basicLightbox.create(`
  <img src="path/to/your/image.jpg" width="800" height="600">
`, {
  closable: false
});
lightbox.show();

Этот параметр позволяет отключить закрытие окна с помощью клавиши Escape.

Шаг 5: Оптимизация и сборка

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

5.1. Минификация с Webpack

Для минификации можно использовать такие плагины, как TerserPlugin или другие оптимизаторы, которые помогут уменьшить размер файлов и ускорить загрузку.

5.2. Создание кастомной сборки

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

Заключение

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

Оглавление