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
$ 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.

<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’

<a href="https://unsplash.it/1200/768?image=260" data-toggle="lightbox" data-type="image">
  Click To Open
</a>

Changelog:

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.

The post Feature-rich Lightbox Gallery Based On Bootstrap 5 – bs5-lightbox.js appeared first on CSS Script.