Динамическое формирование контента

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

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

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

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

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

Или, при использовании npm:

npm install basiclightbox

После подключения библиотеки создается объект модального окна, который управляется через методы BasicLightbox.create(). Например, для отображения изображения в модальном окне код будет следующим:

const instance = basicLightbox.create(`
    <img src="image.jpg" width="800" height="600">
`);
instance.show();

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

Динамическая подгрузка контента

Для создания динамического контента в модальном окне нужно использовать возможности JavaScript для формирования HTML-разметки, а затем передавать эту разметку в библиотеку BasicLightbox.

Пример 1: Динамическая загрузка изображений

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

const images = [
    { src: 'image1.jpg', alt: 'Image 1' },
    { src: 'image2.jpg', alt: 'Image 2' },
    { src: 'image3.jpg', alt: 'Image 3' }
];

const gallery = document.querySelector('.image-gallery');

images.forEach(image => {
    const imgElement = document.createElement('img');
    imgElement.src = image.src;
    imgElement.alt = image.alt;
    imgElement.classList.add('gallery-item');
    
    imgElement.addEventListener('click', () => {
        const instance = basicLightbox.create(`
            <img src="${image.src}" alt="${image.alt}" width="100%" height="100%">
        `);
        instance.show();
    });

    gallery.appendChild(imgElement);
});

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

Пример 2: Динамическая загрузка видеоконтента

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

const videos = [
    { src: 'video1.mp4', title: 'Video 1' },
    { src: 'video2.mp4', title: 'Video 2' },
    { src: 'video3.mp4', title: 'Video 3' }
];

const videoGallery = document.querySelector('.video-gallery');

videos.forEach(video => {
    const videoElement = document.createElement('button');
    videoElement.textContent = video.title;
    videoElement.classList.add('video-item');
    
    videoElement.addEventListener('click', () => {
        const instance = basicLightbox.create(`
            <video controls width="100%">
                <source src="${video.src}" type="video/mp4">
                Ваш браузер не поддерживает видео.
            </video>
        `);
        instance.show();
    });

    videoGallery.appendChild(videoElement);
});

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

Обработка данных из внешних источников

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

Пример загрузки изображения и описания через API:

fetch('https://api.example.com/image')
    .then(response => response.json())
    .then(data => {
        const instance = basicLightbox.create(`
            <div>
                <img src="${data.imageUrl}" alt="${data.title}" width="100%">
                <p>${data.description}</p>
            </div>
        `);
        instance.show();
    })
    .catch(error => console.error('Error loading data:', error));

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

Работа с различными типами контента

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

Пример динамического формирования формы:

const formContent = `
    <form>
        <label for="name">Имя:</label>
        <input type="text" id="name" name="name" required>
        <label for="email">Email:</label>
        <input type="email" id="email" name="email" required>
        <button type="submit">Отправить</button>
    </form>
`;

const formButton = document.querySelector('.show-form');

formButton.addEventListener('click', () => {
    const instance = basicLightbox.create(formContent);
    instance.show();
});

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

Заключение

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