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

Category: Gallery , Javascript , Modal & Popup | February 1, 2023
Author:trvswgnr
Views Total:1,929 views
Official Page:Go to website
Last Update:February 1, 2023
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 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.

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

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

    Reply

Leave a Reply