Bootstrap 5 + fslightbox.js: создание лайтбоксов и галерей

Установка

Для начала установим fslightbox.js. Вы можете воспользоваться npm или yarn:

npm install fslightbox
# или
yarn add fslightbox

Или просто скачать библиотеку с оф. сайта или с текущего сайта.

Затем подключите основной JavaScript-файл:

<script src="fslightbox.js"></script>

Использование

Простое изображение

Добавьте ссылку на изображение в тег <a>, используя атрибут data-fslightbox:

<a href="/assets/integration/fslightbox/maninmountain.jpg" data-fslightbox>
    <img src="/assets/integration/fslightbox/maninmountain-smal.jpg" class="img-fluid">
</a>

Результат:

HTML5 видео

Добавьте ссылку на видео в тег <a>, используя атрибут data-fslightbox="html5-demo-videos" и изображение постера в атрибут img с классом img-fluid:

<a data-fslightbox="html5-demo-videos" href="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4">
    <img class="img-fluid" src="/img/demo/bbunny-min.jpg" alt="Big Black Bunny Fullscreen Lightbox">
</a>

Результат:

YouTube видео

Добавьте ссылку на YouTube видео в тег <a>, используя атрибут data-fslightbox="html5-youtube-videos" и изображение постера в атрибут img с классом img-fluid:

<a data-fslightbox="html5-youtube-videos" href="https://www.youtube.com/watch?v=zyXmsVwZqX4">
    <img class="img-fluid" src="https://img.youtube.com/vi/zyXmsVwZqX4/mqdefault.jpg" alt="Why we lose - Fullscreen Lightbox">
</a>

Результат:

См. так же: как достать превью с YouTube.

Галерея изображений

Создайте галерею, используя бутстрап сетку и класссы, и добавив атрибут data-fslightbox с каким нибудь именем, например demo-images (data-fslightbox="demo-images") к ссылкам:

<div class="row g-2">
    <div class="col">
        <a data-fslightbox="demo-images" class="my-2 d-block" href="/img/demo/child.jpg">
            <img class="img-fluid" src="/img/demo/child-min.jpg" alt="Child in mountains">
        </a>
        <a data-fslightbox="demo-images" class="my-2 d-block" href="/img/demo/flowers-sunshine.jpg">
            <img class="img-fluid" src="/img/demo/flowers-sunshine-min.jpg" alt="Florid sunshine">
        </a>
        <a data-fslightbox="demo-images" class="my-2 d-block" href="/img/demo/butterflies.jpg">
            <img class="img-fluid" src="/img/demo/butterflies-min.jpg" alt="Butterflies">
        </a>
    </div>
    <div class="col">
        <a data-fslightbox="demo-images" class="my-2 d-block" href="/img/demo/maninmountain.jpg">
            <img class="img-fluid" src="/img/demo/maninmountain-min.jpg" alt="Man in mountains">
        </a>
        <a data-fslightbox="demo-images" class="my-2 d-block" href="/img/demo/sky.jpg">
            <img class="img-fluid" src="/img/demo/sky-min.jpg" alt="Sky">
        </a>
        <a data-fslightbox="demo-images" class="my-2 d-block" href="/img/demo/sunrise.jpg">
            <img class="img-fluid" src="/img/demo/sunrise-min.jpg" alt="Sunrise">
        </a>
    </div>
    <div class="col">
        <a data-fslightbox="demo-images" class="my-2 d-block" href="/img/demo/rocks.jpg">
            <img class="img-fluid" src="/img/demo/rocks-min.jpg" alt="Rocks">
        </a>
        <a data-fslightbox="demo-images" class="my-2 d-block" href="/img/demo/greenland.jpg">
            <img class="img-fluid" src="/img/demo/greenland-min.jpg" alt="Greenland">
        </a>
        <a data-fslightbox="demo-images" class="my-2 d-block" href="/img/demo/ocean.jpg">
            <img class="img-fluid" src="/img/demo/ocean-min.jpg" alt="Ocean">
        </a>
		<a data-fslightbox="demo-images" class="my-2 d-block" href="/img/demo/lake-in-forest.jpg">
            <img class="img-fluid" src="/img/demo/lake-in-forest-min.jpg" alt="Lake in the forest">
        </a>
    </div>
</div>

Результат:

Заключение

Теперь вы знаете, как создавать красивые галереи с помощью Bootstrap 5 и fslightbox.js. Не забудьте посетить официальный сайт fslightbox.js, чтобы узнать больше о возможностях этой библиотеки. Удачи в разработке!