Skip to content
On this page

Events

Fancybox exposes custom events that can be hooked on to. To set event listeners, use the on option when initializing Fancybox, or you can use the on() API method.

The first argument each listener receives is a reference to the current Fancybox instance. Use it to retrieve references to DOM elements and a lot of other useful information.

js
Fancybox.bind('[data-fancybox="gallery"]', {
  on: {
    done: (fancybox, slide) => {
      if (fancybox.isCurrentSlide(slide)) {
        console.log(`The main slide #${slide.index} has finished revealing`);
      } else {
        console.log(
          `Slide #${slide.index} is preloaded and the content is revealed`
        );
      }
    },
  },
});

Here's a simple example that shows how to get a reference to the active slide and call the Panzoom method:

js
Fancybox.bind('[data-fancybox="gallery"]', {
  on: {
    keydown: (fancybox, key) => {
      switch (key) {
        case "+":
          fancybox.getSlide()?.panzoom.zoomIn();
          break;

        case "-":
          fancybox.getSlide()?.panzoom.zoomOut();
          break;
      }
    },
  },
});

If you use * as the name of the event, you can listen to any event, here is an example

js
Fancybox.bind('[data-fancybox="gallery"]', {
  on: {
    "*": (fancybox, eventName) => {
      console.log(`Fancybox eventName: ${eventName}`);
    },
  },
});

JSFiddle Example

Available Events

NameDescription
*Any event
Carousel.*Any Carousel event
initInitialization has started, plugins have been added
initLayoutThe layout is initialized
initCarouselThe Carousel is initialized
readyInitialization has been completed
loadingThe content on one of the slides starts loading
loadedContent is loaded on one of the slides but is not yet displayed
errorContent could not be loaded in one of the slides
revealContent is ready to be displayed on one of the slides
doneContent is revealed on one of the slides
setIdleThe idle state is activated
endIdleThe idle state is deactivated
endSlideshowThe slideshow has been deactivated
keydownA keyboard button is pressed
clickSingle click event has been detected
wheelWheel event has been detected
resizeA window resizing event was detected
shouldCloseClosing has begun and can be prevented
startSlideshowThe slideshow is activated
closeClosing is ongoing
destroyInstance is detroyed