Feature-rich Lightbox Gallery Based On Bootstrap 5 – bs5-lightbox.js

Category: Gallery , Javascript , Modal & Popup | February 1, 2023
Views Total:4,626 views
Official Page:Go to website
Last Update:February 1, 2023


Feature-rich Lightbox Gallery Based On Bootstrap 5 – bs5-lightbox.js


A JavaScript lightbox gallery plugin for showcasing images, videos, Instagram posts, iframes in Bootstrap 5 modal & carousel components.

How to use it:

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

// With 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 a single lightbox with a custom image caption.

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

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" />
<!-- 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" />
<!-- 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" />
<!-- Instagram Post -->
<a href="https://instagram.com/p/POSTID/" data-toggle="lightbox" data-title="Custom Title" data-gallery="my-gallery">
  <img src="thumb-4" />
<!-- Remote URL -->
<a href="https://cssscript.com" data-title="CSSScript" data-toggle="lightbox"  data-gallery="mixedgallery">

4. Determine the media type in cases where have no extension provided.

  • ‘image’
  • ‘youtube’
  • ‘vimeo’
  • ‘instagram’
  • ‘video’
  • ‘url’
  • ‘html’
<a href="https://unsplash.it/1200/768?image=260" data-toggle="lightbox" data-type="image">
  Click To Open


v1.8.3 (02/01/2023)

  • Fixed an issue with Vimeo embeds resulting in 404.

v1.8.1 (09/16/2022)

  • Fixes slide issue on Bootstrap ^5.2
  • Constrain images to original dimensions by default, with option to disable
  • Updated options and types
  • Added support for YouTube parameters in URL
  • Fixes a bug where using a forced image type with a caption would break the URL

v1.8.0 (04/09/2022)

  • Reworked entire build process, no longer packages any existing Bootstrap 5 components, resulting is drastically reduced file sizes
  • Ditched TypeScript for now to increase accessibility and pure-javascript clarity
  • Added feature to allow custom HTML in data-src with data-type=”html”
  • Added “module” to package.json for ES modules, allowing Tree Shaking
  • Bugfixes and general improvements

v1.7.11 (03/29/2022)

  • Fixed a bug where data-type=”image” wasn’t being handled correctly on galleries
  • Automatic checking for image types is now case insensitive
  • Fixed a bug where galleries weren’t opening on the selected media

v1.7.10 (03/24/2022)

  • Fixes an issue with some outlying code causing an error.

v1.7.8 (01/24/2022)

  • Add keyboard support for carousel

v1.7.2 (10/08/2021)

  • Add captions feature

v1.7.0 (10/08/2021)

  • Fixes bugs related to captions and the modal close button.

v1.6.3 (10/05/2021)

  • Now using TypeScript for the main module. Drastically simplified the build process. Fixed bugs, and compatibility issues.

You Might Be Interested In:

4 thoughts on “Feature-rich Lightbox Gallery Based On Bootstrap 5 – bs5-lightbox.js

  1. dan

    Hi, Are the captions working? Seems to not be working on the demos and now on my downloaded copy

  2. Travis Wagner

    Autoplay should be disabled by default, but I would recommend using the
    YouTube Player API with the bootstrap modal and carousel events if you need more control.


Leave a Reply