JS Lightbox Gallery for Bootstrap 5 Based on Modal & Carousel Plugins

A simplified Bootstrap 5 lightbox written in pure ES6 JavaScript that supports images, galleries, YouTube, Vimeo, and Instagram – built around the Modal and Carousel plugins in Bootstrap.

bootstrap filter gallery with lightbox, bootstrap 5 lightbox gallery, responsive lightbox image gallery jquery, responsive grid gallery with lightbox popup, bootstrap responsive lightbox

How to make use of it:

1. Import the JavaScript bs5-lightbox.js file into your Bootstrap 5 project.

// With NPM
# NPM
$ npm i bs5-lightbox

import Lightbox from 'bs5-lightbox'

// Browser
<!-- Bootstrap 5 -->
<link rel="stylesheet" href="/path/to/cdn/bootstrap.min.css" />
<script src="/path/to/cdn/bootstrap.bundle.min.js"></script>
<!-- Bootstrap 5 -->
<script src="/path/to/cdn/bs5-lightbox.min.js"></script>

2. Create one lightbox.

<a href="1.jpg" data-toggle="lightbox">
  <img src="thumb-1" alt="Click To Enlarge" />
</a>

3. Create a lightbox gallery with mixed content.

<!-- Image -->
<a href="1.jpg" data-toggle="lightbox" data-gallery="my-gallery">
  <img src="thumb-1" alt="Click To Enlarge" />
</a>
<!-- OR -->
<img src="thumb.jpg" data-toggle="lightbox" data-src="1.jpg" data-gallery="my-gallery" />

<!-- Youtube Video -->
<a href="https://www.youtube.com/watch?v=VIDEOID" data-toggle="lightbox" data-gallery="my-gallery">
  <img src="thumb-2.jpg" />
</a>

<!-- Vimeo Video -->
<a href="https://vimeo.com/VIDEOID" data-remote="https://player.vimeo.com/video/VIDEOID" data-toggle="lightbox" data-gallery="my-gallery">
  <img src="thumb-3" />
</a>

<!-- Instagram Post -->
<a href="https://instagram.com/p/POSTID/" data-toggle="lightbox" data-title="Custom Title" data-gallery="my-gallery">
  <img src="thumb-4" />
</a>

<!-- Remote URL -->
<a href="#!" data-title="" data-toggle="lightbox"  data-gallery="mixedgallery">
  CSSScript.com
</a>

4. Determining the type of media in cases where no extension is provided.

<a href="https://unsplash.it/1200/768?image=260" data-toggle="lightbox" data-type="image">
  Click To Open
</a>

Feature-rich Lightbox Gallery Based On Bootstrap 5, Lightbox for Bootstrap 5 Plugin/Github, bootstrap lightbox example, bootstrap lightbox multiple images, bootstrap lightbox popup