Skip to main content

Events

You can listen for events using your Fancybox instance. You can use the on() or once() API methods, it is also possible to use on or once options to set event callbacks when initialising Fancybox.

The first argument received by each callback is a reference to the current Fancybox instance, except for the wildcard * event, where the event name is the first.

By default, Fancybox preloads the next and previous slides, which means that content will be loaded on all these slides, and all lifecycle events will be called for each slide.

#1 Example#

Fancybox.bind("[data-fancybox]", {  on: {    load: (fancybox, slide) => {      console.log(`#${slide.index} slide is loaded!`);      console.log(        `This slide is selected: ${fancybox.getSlide().index === slide.index}`      );    },  },});

#2 Example#

const fancybox = new Fancybox([  {    src: "https://lipsum.app/id/1/800x600",    type: "image",  },]);
fancybox.on("done", (fancybox, slide) => {  console.log(`done!`);});

#3 Example#

new Fancybox(  [    {      src: "https://lipsum.app/id/1/800x600",      type: "image",    },  ],  {    on: {      "*": (event, fancybox, slide) => {        console.log(`event: ${event}`);      },      "Carousel.createSlide": (fancybox, carousel, slide) => {        console.log(slide.$el);      },      done: (fancybox, slide) => {        console.log(`done!`);      },    },  });
NameDescription
initInitialization has started, plugins have been attached
initLayoutLayout has been initialized
initCarouselMain carousel has been initialized
readyInitialization has been completed
loadOne of the slides has content loaded, but it's not ready yet
revealContent is ready to be revealed on one of the slides
doneContent has been revealed on one of the slides
keydownA key is pressed
shouldCloseClosing has begun and can be prevented; cancelable
closingClosing has not been prevented is proceeding
destroyClosing has completed