Skip to main content

FAQ

Fancybox

Opening/closing causes fixed element to jump or resize horizontally

Simply add compensate-for-scrollbar CSS class to your fixed positioned elements. Example of using Bootstrap navbar component:

<nav class="navbar navbar-inverse navbar-fixed-top compensate-for-scrollbar">
<div class="container">..</div>
</nav>

Page scrolls after closing Fancybox

This is most likely due to Fancybox placing the focus back to the link associated with the gallery item. You can disable this feature by setting placeFocusBack:false.

How to customize caption?

Use caption option that accepts a function and is called for each group element.

  1. Example of appending image download link (demo):
Fancybox.bind('[data-fancybox="gallery"]', {
caption: function (fancybox, carousel, slide) {
let caption = slide.caption;

if (slide.type === "image") {
caption =
(caption.length ? caption + "<br />" : "") +
'<a target="_blank" href="' +
slide.src +
'">Download image</a>';
}

return caption;
},
});
  1. Add the index of the current item and the total number of items in the gallery (demo):
Fancybox.bind('[data-fancybox="gallery"]', {
Toolbar: false,

caption: function (fancybox, carousel, slide) {
let caption = slide.caption;

return (
(caption.length ? caption + "<br />" : "") +
"Image " +
(slide.index + 1) +
" of " +
carousel.pages.length
);
},
});
  1. Example of using different source for caption (demo):
Fancybox.bind('[data-fancybox="gallery"]', {
caption: function (fancybox, carousel, slide) {
return slide.$trigger.title;
},
});