Events

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

Fancybox.bind("[data-fancybox]", {
  on: {
    close: () => {
      console.log("Fancybox is closing!");
    },
  },
});

Note that Fancybox is built around the Carousel component, so you need to listen to Carousel events if you want to listen, for example, to a slide change event, or to know when content is loaded into a carousel slide.

To make it easier to add Carousel event listeners, they are available in Fancybox with the carousel prefix, example:

Fancybox.bind("[data-fancybox]", {
  on: {
    "Carousel.change": () => {
      console.log(`Carousel is changing to #${Fancybox.getSlide().index}`);
    },
  },
});

Available Events

Name	Description
*	Any event
Carousel.*	Any Carousel event
init	Initialization has started
initPlugins	Plugins have been initialized
initSlides	Slides have been initialized
initLayout	Layout has been initialized
initCarousel	Carousel has been initialized
ready	Initialization has been completed
keydown	A keyboard button is pressed
close	Closing is ongoing
destroy	Instance is detroyed

Tips and Tricks

Any event

If you use * as the name of the event, you can listen to any event. This way you can quickly check what events are available, including events emitted by the Carousel and its plugins. Here is an example:

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

Current slide

A fairly common need is to do something when a Fancybox starts or when a Carousel item changes. For example, you might want to get information from the current trigger element to update an element on the page. You can use Carousel.ready and Carousel.change events for this:

Fancybox.bind("[data-fancybox]", {
  on: {
    "Carousel.ready Carousel.change": () => {
      const slide = Fancybox.getSlide();

      console.log(`Current slide index: #${slide.index}`);

      console.log(`Slide element:`);
      console.log(slide.el);

      console.log(`Corresponding trigger element:`);
      console.log(slide.triggerEl);
    },
  },
});

Content load

Use Carousel.contentReady event to detect when the content has been placed in the slide element and is ready to be displayed.

Note that Fancybox uses Carousel with the Lazyload plugin, which loads images from the next and previous slides by default. Use isCurrentSlide() API method to determine whether the content is loaded on the current slide or if it is preloaded on another slide.

Fancybox.bind("[data-fancybox]", {
  on: {
    "Crousel.contentReady": (fancyboxRef, carouselRef, slide) => {
      if (fancyboxRef.isCurrentSlide(slide)) {
        console.log(
          `The content of the current slide #${slide.index} is loaded`
        );
      } else {
        console.log(`The content of the slide #${slide.index} is preloaded`);
      }
    },
  },
});