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

Category: Gallery , Javascript , Modal & Popup | October 8, 2021
Author:trvswgnr
Views Total:447 views
Official Page:Go to website
Last Update:October 8, 2021
License:MIT

Preview:

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

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.

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


2 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

    Reply

Leave a Reply