Zoomable Lightbox Gallery With Bootstrap 5

A responsive, zoomable lightbox gallery built with Bootstrap 5 and Bootstrap Icons.

How to use it:

1. Load the necessary Bootstrap 5 framework and Bootstrap Icons in the document.

<link rel="stylesheet" href="/path/to/cdn/bootstrap.min.css" />
<script src="/path/to/cdn/bootstrap.min.js"></script>
<link rel="stylesheet" href="/path/to/cdn/bootstrap-icons.min.css">

2. Load the stylesheet bootstrap-lightbox.min.css and JavaScript bootstrap-lightbox.min.js from dist folder.

<link rel="stylesheet" href="./dist/bootstrap-lightbox.min.css" />
<script src="./dist/bootstrap-lightbox.min.js"></script>

3. Define an array of images for the gallery.

const myImages = [
  '/path/to/1.jpg',
  '/path/to/2.jpg',
  '/path/to/3.jpg',
  // ...
];

4. Create an element to trigger the lightbox gallery.

<a id="openGalleryAnchor" href="#">
  Toggle The Gallery
</a>

5. Initialize the lightbox gallery. That’s it.

const { BootstrapLightbox } = BootstrapLightboxModule;
document.addEventListener('DOMContentLoaded', () => {
  const myLightbox = new BootstrapLightbox('#openGalleryAnchor1', {
        name: 'myGallery',
        data: myImages
    });
  bootstrapLightbox1.createGallery();
});

6. Add a logo to the lightbox gallery.

const { BootstrapLightbox } = BootstrapLightboxModule;
document.addEventListener('DOMContentLoaded', () => {
  const myLightbox = new BootstrapLightbox('#openGalleryAnchor1', {
        name: 'myGallery',
        data: myImages,
        logo: 'logo.png',
    });
  bootstrapLightbox1.createGallery();
});

The post Zoomable Lightbox Gallery With Bootstrap 5 appeared first on CSS Script.