Events
lightGallery emits several custom events throughout the gallery lifecycle. This can be used to customize the gallery or to add your own features. Demo
Usage example
lightGallery custom events can be attached to the HTML element that you are using to initialize the gallery. Every custom event holds useful plugin data that can be used to control or customize lightGallery. Make sure that you attach event listeners before initializing lightGallery
const lg = document.getElementById('custom-events-demo');
// Perform any action just before opening the gallery
lg.addEventListener('lgBeforeOpen', () => {
alert('onBeforeOpen');
});
// custom event with useful plugin data
lg.addEventListener('lgBeforeSlide', (event) => {
const { index, prevIndex } = event.detail;
alert(index, prevIndex);
});
lightGallery(lg);
Available custom events
Here you can find the list of available custom events. Most of the events provide useful lightGallery data via the event detail object. The table in each event section represents the event detail object.
Name: lgInit
Description: Fired only once when lightGallery is initialized
Detail:
| Name | Type | Description |
|---|---|---|
| instance | LightGallery | lightGallery plugin instance |
Example:
const lg = document.getElementById('custom-events-demo');
// Perform any action on lightGallery initialization.
// Init event returns the plugin instance that can be used to call any lightGalley public method
let pluginInstance = null;
lg.addEventListener('lgInit', (event) => {
pluginInstance = event.detail.instance;
});
lightGallery(lg);See also:Methods
Name: lgBeforeOpen
Description: Fired immediately before opening the gallery
Name: lgAfterOpen
Description: Fired immediately after opening the gallery
Name: lgAfterAppendSlide
Description: Fired when the slide content has been inserted into it's slide container.
Detail:
| Name | Type | Description |
|---|---|---|
| index | number | Index of the slide |
Name: lgAfterAppendSubHtml
Description: Fired when the sub-html content (ex : title/ description) has been appended into the slide.
Detail:
| Name | Type | Description |
|---|---|---|
| index | number | Index of the slide |
Name: lgSlideItemLoad
Description: Fired once the media inside the slide has been completely loaded .
Detail:
| Name | Type | Description |
|---|---|---|
| delay | number | For the first slide, lightGallery adds some delay for displaying the loaded slide item. This delay is required for the transition effect when the slide item is displayed Respect the delay when you use this event |
| index | number | Index of the slide |
| isFirstSlide | boolean |
Name: lgHasVideo
Description: Fired when lightGallery detects video slide
Detail:
| Name | Type | Description |
|---|---|---|
| hasPoster | boolean | True if video has poster |
| html5Video | VideoSource |
HTML5 video source if available
HTML5 video source = source: { src: string; type: string; }[]; attributes: HTMLVideoElement; |
| index | number | Index of the slide, |
| src | string | Video source |
Name: lgBeforeSlide
Description: Fired immediately before each slide transition.
Detail:
| Name | Type | Description |
|---|---|---|
| fromThumb | boolean | true if slide function called via thumbnail click |
| fromTouch | boolean | true if slide function called via touch event or mouse drag |
| index | number | Index of the slide |
| prevIndex | number | Index of the previous slide |
Example:
const lg = document.getElementById('custom-events-demo');
// Perform any action before each slide transition
lg.addEventListener('lgBeforeSlide', (event) => {
const { index, prevIndex } = event.detail;
alert(index, prevIndex);
});
lightGallery(lg);
Name: lgAfterSlide
Description: Fired immediately after each slide transition.
Detail:
| Name | Type | Description |
|---|---|---|
| fromThumb | boolean | true if slide function called via thumbnail click |
| fromTouch | boolean | true if slide function called via touch event or mouse drag |
| index | number | Index of the slide |
| prevIndex | number | Index of the previous slide |
Name: lgBeforeNextSlide
Description: Fired immediately before each "next" slide transition
Detail:
| Name | Type | Description |
|---|---|---|
| fromTouch | boolean | true if slide function called via touch event or mouse drag |
| index | number | Index of the slide |
Name: lgBeforePrevSlide
Description: Fired immediately before each "prev" slide transition
Detail:
| Name | Type | Description |
|---|---|---|
| fromTouch | boolean | true if slide function called via touch event or mouse drag |
| index | number | Index of the slide |
Name: lgPosterClick
Description: Fired when the video poster is clicked.
Name: lgDragStart
Description: Fired when the drag event to move to different slide starts.
Name: lgDragMove
Description: Fired periodically during the drag operation.
Name: lgDragEnd
Description: Fired when the user has finished the drag operation
Name: lgContainerResize
Description: Fired when the lightGallery container has been resized.
Detail:
| Name | Type | Description |
|---|---|---|
| index | number | Index of the slide |
Name: lgBeforeClose
Description: Fired immediately before the start of the close process.
Name: lgAfterClose
Description: Fired immediately once lightGallery is closed.
Detail:
| Name | Type | Description |
|---|---|---|
| instance | LightGallery | lightGallery plugin instance |
Name: lgRotateLeft
Description: Fired when the image is rotated in anticlockwise direction
Detail:
| Name | Type | Description |
|---|---|---|
| index | number | Index of the slide |
Name: lgRotateRight
Description: Fired when the image is rotated in clockwise direction
Detail:
| Name | Type | Description |
|---|---|---|
| index | number | Index of the slide |
Name: lgFlipHorizontal
Description: Fired when the image is flipped horizontally
Detail:
| Name | Type | Description |
|---|---|---|
| index | number | Index of the slide |
Name: lgFlipVertical
Description: Fired when the image is flipped vertically
Detail:
| Name | Type | Description |
|---|---|---|
| index | number | Index of the slide |