Toolbar
The Carousel Toolbar plugin is used under the hood to create a toolbar element with configurable items - buttons, links, or any HTML content. Here are examples of how to customize it for Fancybox.
Transformation controls
Use any transformation button provided by the Panzoom component:
Fancybox.bind("[data-fancybox]", {
Carousel: {
Toolbar: {
display: {
left: ["counter"],
middle: [
"zoomIn",
"zoomOut",
"toggle1to1",
"rotateCCW",
"rotateCW",
"flipX",
"flipY",
"reset",
],
right: ["autoplay", "thumbs", "close"],
},
},
},
});
Download button
A download button is also available. Use the data-download-src
attribute to customize the download link for the download button. Optionally, use the data-download-filename
attribute to suggest a filename.
<a
href="https://lipsum.app/id/15/1600x1200/"
data-fancybox="gallery"
data-download-src="https://lipsum.app/id/15/3200x2400"
>
<img src="https://lipsum.app/id/15/200x150" />
</a>
Fancybox.bind("[data-fancybox]", {
Carousel: {
Toolbar: {
display: {
left: ["counter"],
middle: [],
right: ["download", "thumbs", "close"],
},
},
},
});
Custom button
Use the items
option to populate the available toolbar items. Each object should have a tpl
property containing the item template and optional click
property containing the method that will be executed when clicked.
Fancybox.bind("[data-fancybox]", {
Carousel: {
Toolbar: {
items: {
facebook: {
tpl: '<button class="f-button"><svg><path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z"/></svg></button>',
click: () => {
window.open(
"https://www.facebook.com/sharer/sharer.php?u=" +
encodeURIComponent(window.location.href) +
"&t=" +
encodeURIComponent(document.title),
"",
"left=0,top=0,width=600,height=300,menubar=no,toolbar=no,resizable=yes,scrollbars=yes"
);
},
},
twitter: {
tpl: '<button class="f-button"><svg><path stroke="none" d="M0 0h24v24H0z"/><path d="M22 4.01c-1 .49-1.98.689-3 .99-1.121-1.265-2.783-1.335-4.38-.737S11.977 6.323 12 8v1c-3.245.083-6.135-1.395-8-4 0 0-4.182 7.433 4 11-1.872 1.247-3.739 2.088-6 2 3.308 1.803 6.913 2.423 10.034 1.517 3.58-1.04 6.522-3.723 7.651-7.742a13.84 13.84 0 0 0 .497-3.753c0-.249 1.51-2.772 1.818-4.013z"/></svg></button>',
click: () => {
window.open(
"http://twitter.com/share?url=" +
encodeURIComponent(window.location.href) +
"&text=" +
encodeURIComponent(document.title),
"",
"left=0,top=0,width=600,height=300,menubar=no,toolbar=no,resizable=yes,scrollbars=yes"
);
},
},
},
display: {
left: ["infobar"],
middle: [],
right: ["twitter", "facebook", "close"],
},
},
},
});
Dynamic
Since Fancybox displays an instance of the Carousel, you can use its breakpoints
option to display toolbar items depending on the screen size, example:
Fancybox.bind("[data-fancybox]", {
Carousel: {
Toolbar: {
display: {
left: ["counter"],
middle: [],
right: ["thumbs", "close"],
},
},
breakpoints: {
"(min-width: 768px)": {
Toolbar: {
display: {
left: ["counter"],
middle: [
"zoomIn",
"zoomOut",
"toggle1to1",
"rotateCCW",
"rotateCW",
"flipX",
"flipY",
],
right: ["autoplay", "thumbs", "close"],
},
},
},
},
},
});