FancyappsEvents
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}`);
},
},
});
Available Events
| Name | Description |
|---|---|
| * | Any event |
Carousel.* | Any Carousel event |
init | Initialization has started, plugins have been added |
initLayout | The layout is initialized |
initCarousel | The Carousel is initialized |
ready | Initialization has been completed |
loading | The content on one of the slides starts loading |
loaded | Content is loaded on one of the slides but is not yet displayed |
error | Content could not be loaded in one of the slides |
reveal | Content is ready to be displayed on one of the slides |
done | Content is revealed on one of the slides |
setIdle | The idle state is activated |
endIdle | The idle state is deactivated |
endSlideshow | The slideshow has been deactivated |
keydown | A keyboard button is pressed |
click | Single click event has been detected |
wheel | Wheel event has been detected |
resize | A window resizing event was detected |
shouldClose | Closing has begun and can be prevented |
startSlideshow | The slideshow is activated |
close | Closing is ongoing |
destroy | Instance is detroyed |