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:

NameTypeDescription
instanceLightGallerylightGallery 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:

NameTypeDescription
indexnumberIndex of the slide

Name: lgAfterAppendSubHtml

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

Detail:

NameTypeDescription
indexnumberIndex of the slide

Name: lgSlideItemLoad

Description: Fired once the media inside the slide has been completely loaded .

Detail:

NameTypeDescription
delaynumberFor 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
indexnumberIndex of the slide
isFirstSlideboolean

Name: lgHasVideo

Description: Fired when lightGallery detects video slide

Detail:

NameTypeDescription
hasPosterbooleanTrue if video has poster
html5VideoVideoSourceHTML5 video source if available

HTML5 video source = source: { src: string; type: string; }[]; attributes: HTMLVideoElement;

indexnumberIndex of the slide,
srcstringVideo source

Name: lgBeforeSlide

Description: Fired immediately before each slide transition.

Detail:

NameTypeDescription
fromThumbbooleantrue if slide function called via thumbnail click
fromTouchbooleantrue if slide function called via touch event or mouse drag
indexnumberIndex of the slide
prevIndexnumberIndex 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:

NameTypeDescription
fromThumbbooleantrue if slide function called via thumbnail click
fromTouchbooleantrue if slide function called via touch event or mouse drag
indexnumberIndex of the slide
prevIndexnumberIndex of the previous slide

Name: lgBeforeNextSlide

Description: Fired immediately before each "next" slide transition

Detail:

NameTypeDescription
fromTouchbooleantrue if slide function called via touch event or mouse drag
indexnumberIndex of the slide

Name: lgBeforePrevSlide

Description: Fired immediately before each "prev" slide transition

Detail:

NameTypeDescription
fromTouchbooleantrue if slide function called via touch event or mouse drag
indexnumberIndex 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:

NameTypeDescription
indexnumberIndex 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:

NameTypeDescription
instanceLightGallerylightGallery plugin instance

Edit this page on GitHub

WordPress version

WordPress version of lightGallery is almost ready for release. Enter your Email to get notified when we launch!