Events

Available API events

You can listen for events using your GLightbox instance. You can use the on() API method or once().

Events

Event TypeDescription
openProvide a function when the lightbox is opened.
closeProvide a function when the lightbox is closed.
slide_before_changeTrigger a function before the slide is changed.
slide_changedTrigger a function after the slide is changed.
slide_before_loadTrigger a function before a slide is loaded for the first time, the function will only be called once
slide_after_loadTrigger a function after a slide is loaded and it’s content is set for the first time, the function will only be called once
slide_insertedTrigger a function after a slide is inserted using insertSlide.
slide_removedTrigger a function after a slide is removed`

Examples

const lightbox = GLightbox();
lightbox.on('open', () => {
  // Do something
});

lightbox.once('slide_changed', () => {
  // Do something just one time
});

const lightbox = GLightbox();
lightbox.on('slide_before_change', ({ current, next }) => {
  // current is the index of the currently visible slide
  // next is the index of the slide that will become visible
  // You can use the API to get more information for example:

  // Get the actvide slide node
  const currentSlide = lightbox.getActiveSlide();

  // Get slide data, url, type, and more
  const slideConfig = lightbox.getSlideData(next);
});

lightbox.on('slide_changed', ({ prev, current }) => {
  console.log('Prev slide', prev);
  console.log('Current slide', current);

  // Prev and current are objects that contain the following data
  const { slideIndex, slideNode, slideConfig, trigger } = current;
});

// Useful to modify the slide
// before it's content is added
lightbox.on('slide_before_load', (data) => {
  // data is an object that contain the following
  const { slideIndex, slideNode, slideConfig, player, trigger } = data;
});

// Useful to execute scripts that depends
// on the slide to be ready with all it's content
// and already has a height
// data will contain all the info about the slide
lightbox.on('slide_after_load', (data) => {
  // data is an object that contain the following
  const { slideIndex, slideNode, slideConfig, trigger } = data;
});

// Trigger a function when a slide is inserted
lightbox.on('slide_inserted', (data) => {
  // data is an object that contain the following
  const { slideIndex, slideNode, slideConfig, trigger } = data;
});

// Trigger a function when a slide is removed
lightbox.on('slide_removed', (index) => {
  // index is the position of the element in the gallery
});
Methods Introduction