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.
Some events pass the slide object as the second parameter, you can use it to get a reference to the slide wrapping element, content element, etc.
Fancybox.bind("[data-fancybox]", {
on: {
reveal: (fancybox, slide) => {
// The content of this slide is loaded and ready to be revealed
slide.contentEl.style.filter = "brightness(1.25) contrast(1.25)";
},
},
});
Note that since the next and previous slides are preloaded by default, some events may be called multiple times, for each slide:
Fancybox.bind("[data-fancybox]", {
on: {
done: (fancybox, slide) => {
if (fancybox.isCurrentSlide(slide)) {
console.log(
`The content of the current slide #${slide.index} is loaded and revealed`
);
} else {
console.log(
`The content of the slide #${slide.index} is preloaded and revealed`
);
}
},
},
});
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 |
Tips and Tricks
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. Here is an example:
Fancybox.bind("[data-fancybox]", {
on: {
"*": (fancybox, eventName) => {
console.log(`Fancybox eventName: ${eventName}`);
},
},
});
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": (fancybox) => {
// Current slide
const slide = fancybox.getSlide();
// The corresponding trigger element
// (i.e. the link that is clicked to launch Fancybox)
const triggerEl = slide.triggerEl;
// Data from the trigger element
const title = triggerEl.dataset.title;
alert(title);
},
},
});
Here's a simple example that shows how to get a reference to the active slide and call the Panzoom method. An instance of Panzoom is created by the Image plugin for each slide.
Fancybox.bind("[data-fancybox]", {
on: {
keydown: (fancybox, key) => {
switch (key) {
case "+":
fancybox.getSlide()?.panzoom.zoomIn();
break;
case "-":
fancybox.getSlide()?.panzoom.zoomOut();
break;
}
},
},
});