API Docs

Events

View as Markdown Open in Claude Open in ChatGPT

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;
    console.log(index, prevIndex);
});

lightGallery(lg);

The framework packages expose the same events, with the same detail object as the callback argument, under their own naming rule. In React each event is a callback prop with an on prefix, onBeforeSlide={(detail) => …}. In Vue it is a kebab-case emit without the prefix, @before-slide="onSlide". In Angular it is an output without the prefix, (beforeSlide)="onSlide($event)".

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.

lgInit

Fired only once when lightGallery is initialized

Event detail
Name Type Description
instance LightGallery The gallery instance, the same object lightGallery() returns.
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 lightGallery public method
  let pluginInstance = null;
  lg.addEventListener('lgInit', (event) => {
     pluginInstance = event.detail.instance;
  });
  lightGallery(lg);

See also Methods

lgBeforeOpen

Fired immediately before opening the gallery

lgAfterOpen

Fired immediately after opening the gallery

lgAfterAppendSlide

Fired when the slide content has been inserted into its slide container.

Event detail
Name Type Description
index number Index of the slide

lgAfterAppendSubHtml

Fired when the sub-html content (ex : title/ description) has been appended into the slide.

Event detail
Name Type Description
index number Index of the slide

lgSlideItemLoad

Fired once the media inside the slide has been completely loaded, or has failed to load and the slide shows its error message instead.

Event 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 True when the loaded slide is the first one shown after the gallery opened.

lgHasVideo

Fired when lightGallery detects video slide

Event 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

lgBeforeSlide

Fired immediately before each slide transition.

Event 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);

lgAfterSlide

Fired immediately after each slide transition.

Event 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

lgBeforeNextSlide

Fired immediately before each "next" slide transition

Event detail
Name Type Description
fromTouch boolean true if slide function called via touch event or mouse drag
index number Index of the slide

lgBeforePrevSlide

Fired immediately before each "prev" slide transition

Event detail
Name Type Description
fromTouch boolean true if slide function called via touch event or mouse drag
index number Index of the slide

lgPosterClick

Fired when the video poster is clicked.

lgDragStart

Fired when the drag event to move to different slide starts.

lgDragMove

Fired periodically during the drag operation.

lgDragEnd

Fired when the user has finished the drag operation

lgContainerResize

Fired when the lightGallery container has been resized.

Event detail
Name Type Description
index number Index of the slide

lgBeforeClose

Fired immediately before the start of the close process.

lgAfterClose

Fired immediately once lightGallery is closed.

Event detail
Name Type Description
instance LightGallery The gallery instance, the same object lightGallery() returns.

lgRotateLeft

Fired when the image is rotated in anticlockwise direction

Event detail
Name Type Description
index number Index of the slide

lgRotateRight

Fired when the image is rotated in clockwise direction

Event detail
Name Type Description
index number Index of the slide

lgFlipHorizontal

Fired when the image is flipped horizontally

Event detail
Name Type Description
index number Index of the slide

lgFlipVertical

Fired when the image is flipped vertically

Event detail
Name Type Description
index number Index of the slide

More events

These events have no detail interface of their own:

EventFiresDetail
lgUpdateSlidesAfter the slides change, through updateSlides() or refresh()none
lgAutoplayStartWhen the autoplay slideshow starts (autoplay plugin){ index }
lgAutoplayBefore autoplay moves to the next slide (autoplay plugin){ index }, the slide it moves to
lgAutoplayStopWhen the autoplay slideshow stops (autoplay plugin){ index }

Edit this page on GitHub