https://github.com/trvswgnr/bs5-lightbox

A pure JS lightbox gallery plugin for Bootstrap 5 based on the Modal and Carousel components
https://github.com/trvswgnr/bs5-lightbox

bootstrap bootstrap-5 bootstrap5 carousel ekko-lightbox es6 galleries gallery javascript lightbox modal module

Last synced: about 1 month ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/trvswgnr/bs5-lightbox
• Owner: trvswgnr
• License: mit
• Created: 2021-09-20T01:30:13.000Z (over 3 years ago)
• Default Branch: main
• Last Pushed: 2023-09-21T12:19:36.000Z (over 1 year ago)
• Last Synced: 2025-03-29T13:09:01.426Z (about 1 month ago)
• Topics: bootstrap, bootstrap-5, bootstrap5, carousel, ekko-lightbox, es6, galleries, gallery, javascript, lightbox, modal, module
• Language: JavaScript
• Homepage: https://trvswgnr.github.io/bs5-lightbox/
• Size: 771 KB
• Stars: 149
• Watchers: 7
• Forks: 34
• Open Issues: 29
• Metadata Files:
  • Readme: README.md
  • Funding: .github/FUNDING.yml
  • License: LICENSE

Awesome Lists containing this project

README

        
# Lightbox for Bootstrap 5

A pure JavaScript Bootstrap 5 lightbox that supports images, galleries, YouTube, Vimeo, and Instagram—built around Bootstrap's Modal and Carousel plugins.

Have you been using [Lightbox for Bootstrap (ekko-lightbox)](https://github.com/ashleydw/lightbox) but recently moved to Bootstrap 5? This is your replacement.

Documentation: https://trvswgnr.github.io/bs5-lightbox/

If you enjoy using Bootstrap 5 Lightbox please star this repo.

### Development on [Version 2](https://github.com/trvswgnr/bs5-lightbox/tree/full-rework) has started—currently looking for contributors!

Use [Issues](https://github.com/trvswgnr/bs5-lightbox/issues) to request new features. If you would like to contribute, send me an email at [[email protected]](mailto:[email protected]).

## Status

[![github latest release](https://badgen.net/github/tag/trvswgnr/bs5-lightbox?label=release&cache=600)](https://github.com/trvswgnr/bs5-lightbox/releases/latest)

[![jsdelivr hits per month](https://data.jsdelivr.com/v1/package/npm/bs5-lightbox/badge?style=rounded)](https://www.jsdelivr.com/package/npm/bs5-lightbox)

[![npm downloads](https://badgen.net/npm/dt/bs5-lightbox?label=npm%20downloads&color=blue&cache=600)](https://www.npmjs.com/package/bs5-lightbox)

[![npm minzipped size](https://badgen.net/bundlephobia/minzip/bs5-lightbox?label=gzip%20size&color=green&cache=600)](https://bundlephobia.com/package/bs5-lightbox)

[![npm version](https://badgen.net/npm/v/bs5-lightbox?cache=600)](https://www.npmjs.com/package/bs5-lightbox)

![Libraries.io dependency status for latest release](https://img.shields.io/librariesio/release/npm/bs5-lightbox)

[![Featured on Openbase](https://badges.openbase.com/js/featured/bs5-lightbox.svg?token=R2MqRDwb93ap0dYGkIBBPigErEYve+e1dnfTDZImQog=)](https://openbase.com/js/bs5-lightbox)

## Installation

##### Install with NPM:

```shell

npm i bs5-lightbox

```

##### CDN:

```html

```

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:

```js

import 'bs5-lightbox'

```

By default it will target elements with the `data-toggle="lightbox"` attribute.

If you want to target a different element, import the `Lightbox` class and instantiate it:

```js

import Lightbox from 'bs5-lightbox'

for (const el of document.querySelectorAll('.my-lightbox-toggle')) {

  el.addEventListener('click', Lightbox.initialize)

}

```

## Contributing

Lightbox for Bootstrap 5 is written in pure JavaScript.

Modify the src/index.js 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](https://github.com/sponsors/trvswgnr).

## Copyright and license

Code released under [the MIT license](https://github.com/trvswgnr/bs5-lightbox/blob/main/LICENSE).