https://github.com/betaweb/lightbox
HTML Custom Element Lightbox
https://github.com/betaweb/lightbox
Last synced: 11 months ago
JSON representation
HTML Custom Element Lightbox
- Host: GitHub
- URL: https://github.com/betaweb/lightbox
- Owner: betaWeb
- License: mit
- Created: 2020-11-12T11:32:25.000Z (about 5 years ago)
- Default Branch: main
- Last Pushed: 2020-12-10T14:07:45.000Z (about 5 years ago)
- Last Synced: 2025-03-08T16:30:09.509Z (11 months ago)
- Language: TypeScript
- Size: 420 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# lightbox
A simple JavaScript class to generate images Lightbox
## Getting started
Just load CSS and JS files :
```html
```
Then, create a new instance of Lightbox class :
```javascript
new window.Lightbox()
```
And add the class `.lighbox-link` to an HTML element as follow :
```html
See my image in a lighbox !
```
## Configuration
You can pass a configuration object to the instance, as follow :
```javascript
new window.Lightbox({
selector: '.lightbox--link',
lightbox_class: 'lightbox',
lightbox_inner_class: 'lightbox--inner',
lightbox_legend_class: 'lightbox--legend',
lightbox_visible_class: 'visible',
image_loading_class: 'is-loading',
prevent_scroll: true,
prevent_scroll_class: 'prevent-scroll',
prevent_scroll_element: document.body,
inner_offset: 30, // gap between screen edge and the image (the ratio is dynamically calculated by the library)
nav: true, // display nvigation arrows
nav_prev_class: 'lightbox--prev',
nav_next_class: 'lightbox--next',
dots: true, // display nvigation dots
nav_dots_class: 'lightbox--nav-dots',
created: (groups: LightboxGroup) => {}, // Lightbox created event
onShow: (item: LightboxItem) => {}, // Lightbox show event
onHide: (item: LightboxItem) => {}, // Lightbox hide event
onNav: (item: LightboxItem, direction: number) => {}, // Lightbox nav event (direction : -1 prev, 1 next)
onAdd: (item: LightboxItem) => {}, // Lightbox add image event
onRemove: (item: LightboxItem) => {}// Lightbox remove image event
})
```