https://github.com/shaack/bootstrap-lightbox-gallery
https://github.com/shaack/bootstrap-lightbox-gallery
Last synced: 8 days ago
JSON representation
- Host: GitHub
- URL: https://github.com/shaack/bootstrap-lightbox-gallery
- Owner: shaack
- License: mit
- Created: 2024-02-04T13:30:44.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2025-12-08T15:03:42.000Z (6 months ago)
- Last Synced: 2026-02-01T10:08:25.250Z (5 months ago)
- Language: JavaScript
- Size: 59.6 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# bootstrap-lightbox-gallery
A Bootstrap component to display a gallery of images in a lightbox.
*Show images in your page*
*On click large versions of the images are displayed in a lightbox*
## References
- [Demo page with usage examples](https://shaack.com/projekte/bootstrap-lightbox-gallery)
- [GitHub repository](https://github.com/shaack/bootstrap-lightbox-gallery)
- [npm package](https://www.npmjs.com/package/bootstrap-lightbox-gallery)
## Installation
```bash
npm install bootstrap-lightbox-gallery
```
## Usage
Show the images in the page as figures with (optional hidden) caption.
```html
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Quick brown fox jumps over the lazy dog. All their equipment and instruments are alive.
```
Create the LightboxGallery instance.
```html
{
"imports": {
"bootstrap-lightbox-gallery/": "./node_modules/bootstrap-lightbox-gallery/",
"cm-web-modules/": "./node_modules/cm-web-modules/",
"bootstrap-show-modal/": "./node_modules/bootstrap-show-modal/"
}
}
import {LightboxGallery} from "bootstrap-lightbox-gallery/src/LightboxGallery.js"
new LightboxGallery(document.querySelectorAll("[data-gallery='gallery-1']"),
{
id: "gallery-45c11a", // set this, if you have multiple galleries on one page
title: "My Lightbox Gallery", // set the name, it will be displayed
backgroundTheme: "dark" // set to "light", if you want to display the images on light background
})
```
#### Properties
```js
this.props = {
id: "lightboxGallery", // change this, if you have multiple galleries on one page
backgroundTheme: "dark" // set to "light", if you want to display the images on light background
}
```
new LightboxGallery(document.querySelectorAll("[data-gallery='gallery-1']"), {title: "My Gallery"})
---
Find more high quality modules from [shaack.com](https://shaack.com)
on [our projects page](https://shaack.com/works).