Lightbox for Bootstrap 5
A pure JavaScript Bootstrap 5 lightbox that supports images, galleries, YouTube, Vimeo, and Instagram—built around Bootstrap's Modal and Carousel plugins.
Have you been using Lightbox for Bootstrap (ekko-lightbox) but recently moved to Bootstrap 5? This is your replacement.
A nice and neat lightbox script that can be used for videos and images.
Installation
Using NPM:
$ npm i bs5-lightbox
index.js
import 'bs5-lightbox'
Or grab the latest JS from the CDN and add it after Bootstrap's JS:
<script src="https://cdn.jsdelivr.net/npm/bs5-lightbox@1.6.5/dist/index.bundle.min.js"></script>
Or download the file directly (right-click, Save As...)
Lightbox for Bootstrap 5 will automatically initialize on import, simply add data-toggle="lightbox"
to your anchor tags.
<a href="https://unsplash.it/1200/768.jpg?image=251" data-toggle="lightbox">
<img src="https://unsplash.it/600.jpg?image=251">
</a>
If you want to target a different element, import the Lightbox class and instantiate it on an event:
index.js
import Lightbox from 'bs5-lightbox'
document.querySelectorAll('.my-lightbox-toggle').forEach((el) => el.addEventListener('click', (e) => {
e.preventDefault();
const lightbox = new Lightbox(el);
lightbox.show();
}));
Obviously, you need Bootstrap (made for Bootstrap v5).
Note: I cant actually get this one working, not sure what im missing here...
Sources
Lightbox for Bootstrap 5 Demo
View Demo Full Screen View Demo New Tab
Lightbox for Bootstrap 5 Code
HTML
<h3>Single Image Lightbox</h3>
<a href="https://unsplash.it/1200/768.jpg?image=250" data-toggle="lightbox" class="lightbox">
<img src="https://unsplash.it/600.jpg?image=250" class="img-fluid">
</a>
<h3>Multi Images</h3>
<div class="row">
<a href="https://unsplash.it/1200/768.jpg?image=251" data-toggle="lightbox" data-gallery="example-gallery" class="col-sm-4">
<img src="https://unsplash.it/600.jpg?image=251" class="img-fluid">
</a>
<a href="https://unsplash.it/1200/768.jpg?image=252" data-toggle="lightbox" data-gallery="example-gallery" class="col-sm-4">
<img src="https://unsplash.it/600.jpg?image=252" class="img-fluid">
</a>
<a href="https://unsplash.it/1200/768.jpg?image=253" data-toggle="lightbox" data-gallery="example-gallery" class="col-sm-4">
<img src="https://unsplash.it/600.jpg?image=253" class="img-fluid">
</a>
</div>
<div class="row">
<a href="https://unsplash.it/1200/768.jpg?image=254" data-toggle="lightbox" data-gallery="example-gallery" class="col-sm-4">
<img src="https://unsplash.it/600.jpg?image=254" class="img-fluid">
</a>
<a href="https://unsplash.it/1200/768.jpg?image=255" data-toggle="lightbox" data-gallery="example-gallery" class="col-sm-4">
<img src="https://unsplash.it/600.jpg?image=255" class="img-fluid">
</a>
<a href="https://unsplash.it/1200/768.jpg?image=256" data-toggle="lightbox" data-gallery="example-gallery" class="col-sm-4">
<img src="https://unsplash.it/600.jpg?image=256" class="img-fluid">
</a>
</div>
Scripts
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.2/css/bootstrap.min.css" />
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bs5-lightbox@1.6.5/dist/index.bundle.min.js"></script>
Javascript
import Lightbox from 'bs5-lightbox'
document.querySelectorAll('.lightbox').forEach((el) => el.addEventListener('click', (e) => {
e.preventDefault();
const lightbox = new Lightbox(el);
lightbox.show();
}));
External Link for Lightbox for Bootstrap 5