Bootstrap lightbox is a simple and lightweight JavaScript library that uses the Bootstrap 5 modular component to create a simplified, responsive image box.

responsive lightbox image gallery jquery, bootstrap lightbox multiple images, lightbox jquery download, lightbox popup bootstrap, javascript image gallery with thumbnails

How to make use of it:

1. Load the bs5lightbox.js JavaScript library into the document where the Bootstrap 5 framework is installed.

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

<!-- Image Lightbox Plugin -->
<script src="/path/to/bs5lightbox.js"></script>

2. Add a link with the data-modal=”bs-lightbox” attribute to your image.

<a data-modal="bs-lightbox" 
   href="original-1.jpg">
   <img src="thumb-1.jpg" />
</a>
<a data-modal="bs-lightbox" 
   href="original-2.jpg">
   <img src="thumb-2.jpg" />
</a>
<a data-modal="bs-lightbox" 
   href="original-3.jpg">
   <img src="thumb-3.jpg" />
</a>

3. Customize the lightbox styles.

.modal-content {
  background-color: rgba(0,0,0,.75);
} 

#LightboxCanvas{
  max-width:100%; max-height:100%;
}

Minimal Image Lightbox Plugin For Bootstrap 5, bs5lightbox.js Plugin/Github

See Demo And Download

Official Website(avalon-studio): Click Here

This superior jQuery/javascript plugin is developed by avalon-studio. For extra advanced usage, please go to the official website.