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

Preview:

Description:

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
$ 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" />
</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="https://cssscript.com" data-title="CSSScript" data-toggle="lightbox"  data-gallery="mixedgallery">
  CSSScript.com
</a>

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
</a>

Changelog:

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.