Lightbox for Bootstrap 5: A pure JS Bootstrap 5 lightbox gallery plugin based on the Modal and Carousel components

Contributing

Installation

Using NPM: ```shell $ npm i bs5-lightbox ``` __**`index.js`**__ ```js import 'bs5-lightbox'; ``` Or grab the latest JS from the CDN and add it after Bootstrap's JS:

<script src="https://cdn.jsdelivr.net/npm/bs5-lightbox@1.8.3/dist/index.bundle.min.js"></script>

Or [download the file directly](https://raw.githubusercontent.com/trvswgnr/bs5-lightbox/main/dist/index.bundle.min.js) (right-click, Save As...) Lightbox for Bootstrap 5 will automatically initialize on import, simply add `data-toggle="lightbox"` to your anchor tags. ```html

``` If you want to target a different element, import the Lightbox class and instantiate it on an event: __**`index.js`**__ ```js import Lightbox from 'bs5-lightbox'; document.querySelectorAll('.my-lightbox-toggle').forEach(el => el.addEventListener('click', Lightbox.initialize)); ``` Obviously, you need Bootstrap (made for Bootstrap 5).

Options

Lightbox for Bootstrap 5 accepts all of the options that Bootstrap's Modal and Carousel classes accept, with a few additions.

Name	Type	Default	Description
`target`	string (valid CSS selector)	`'[data-toggle="lightbox"]'`	The target element selector to trigger lightbox events
`gallery`	array \| string	`''`	Optional gallery of elements or string containing gallery name
`size`	'default' \| 'sm' \| 'lg' \| 'xl' \| 'fullscreen'	`'xl'`	Size of lightbox
`constrain`	boolean	`true`	Don't allow images to be larger than their original size

Pass options as an object to the second parameter when creating an instance of the lightbox.

__**`index.js`**__ ```js import Lightbox from 'bs5-lightbox'; const options = { keyboard: true, size: 'fullscreen' }; document.querySelectorAll('.my-lightbox-toggle').forEach((el) => el.addEventListener('click', (e) => { e.preventDefault(); const lightbox = new Lightbox(el, options); lightbox.show(); })); ```

Examples

Thanks to https://unsplash.it/ for the images.

Single Image

Note: add captions using the data-caption or data-footer attribute

Image Gallery

Galleries are created by adding the data-gallery attribute.

Videos

YouTube

You can use various YouTube URL formats, the regex used is: /^.*(youtu.be\/|v\/|u\/\w\/|embed\/|watch\?v=|\&v=)([^#\&\?]*).*/

Parameters are allowed in the URL (e.g. `https://www.youtube.com/watch?v=dQw4w9WgXcQ?start=30`)

Justin Bieber - LoveYourself

Tame Impala - Elephant (using youtu.be link)

Vimeo

You cannot embed Vimeo videos using the standard url (ie https://vimeo.com/80629469); you must link to the embed source (ie player.vimeo.com/video/80629469). This will mean your link url - if the JavaScript fails, will open the full screen player (try opening the first link below in a new tab); the solution to this is to set the lightbox source directly - the second link below does this.

City Lights - from Colin Rich (using embed link)

City Lights - from Colin Rich (with recommended data-remote setting)

Instagram

This also works with photos: Instagram

Gallery of Videos

Mixed gallery

Via `data-remote` or `data-src`

Neither of these are <a> tags, so both rely on the data-remote or data-srcattributes.

Force type

If the images you are linking to have no extension, the lightbox cannot detect that is an image; therefore you need to tell the lightbox what data-type it is.

Current allowed types are: ['image', 'youtube', 'vimeo', 'instagram', 'video', 'url', 'html']

Click here for an image, but with no extension.

This link is missing the type attribute, and will iframe the image.

Hidden elements

Only show a few images but have a large gallery

Remote content

Given a URL that is not an image or video (including unforced types), load the content using an iFrame.

Bootstrap Docs

Custom HTML

Pass custom HTML into the `data-src` attribute, then add the attribute `data-type="html"`.

Custom HTML 1

Custom HTML 2

Contributing

Lightbox for Bootstrap 5 is written in TypeScript and compiled to pure JavaScript. Modify the src/index.ts file, run `npm run build` and create a pull request.

You can help make this project even better and keep it up to date by making a small contribution! Fund this project.

Lightbox for Bootstrap 5