Minimal Image Lightbox Plugin For Bootstrap 5 – bs5lightbox.js

Preview:

Description:

bs5lightbox.js is a JavaScript library that makes use of Bootstrap 5’s modal component to create a responsive image lightbox.

How to use it:

1. Load the bs5lightbox.js JavaScript library in your document which has Bootsptra 5 framework 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. That’s it.

<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 styles of the image lightbox.

.modal-content {
  background-color: rgba(0,0,0,.75);
} 
#LightboxCanvas{
  max-width:100%; max-height:100%;
}