Skip to main content

Toolbar

Creates a toolbar element with configurable items (buttons, links, or any HTML content). Also, adds slideshow and fullscreen functionality.

Configuration example (demo):

Fancybox.bind('[data-fancybox="gallery"]', {
Toolbar: {
display: [
{ id: "prev", position: "center" },
{ id: "counter", position: "center" },
{ id: "next", position: "center" },
"zoom",
"slideshow",
"fullscreen",
"download",
"thumbs",
"close",
],
},
});

Download button is available, but is not enabled by default. Use data-download-src attribute to customize the download button's download link, for example:

<a
href="https://lipsum.app/id/11/800x600/"
data-fancybox="gallery"
data-download-src="https://lipsum.app/id/11/1300x1200"
>
<img src="https://lipsum.app/id/11/400x300" />
</a>

Each toolbar item can be placed left, center, or right, example (demo):

Fancybox.bind('[data-fancybox="gallery"]', {
Toolbar: {
display: [
{ id: "zoom", position: "left" },
{ id: "download", position: "left" },
{ id: "counter", position: "center" },
{ id: "close", position: "right" },
],
},
});

Start in fullscreen mode:

Fancybox.bind('[data-fancybox="gallery"]', {
Image: {
zoom: false,
},

fullscreen: {
autoStart: true,
},
});

Options

display {Array}

What toolbar items to display. Default: ["counter", "zoom", "slideshow", "fullscreen", "thumbs", "close"]

Each item can be either string (as item id) or object. Object, will be used to extend with the dault value, therefore it is easy to change, for example, position or HTML for any item.

autoEnable {Boolean}

Only create a toolbar item if there is at least one image in the group. Default: true

items {Object}

Toolbar items; can be links, buttons or div elements. Default:

{
counter: {
type: "div",
class: "fancybox__counter",
html: '<span data-fancybox-index=""></span>&nbsp;/&nbsp;<span data-fancybox-count=""></span>',
tabindex: -1,
position: "left",
},
prev: {
type: "button",
class: "fancybox__button--prev",
label: "PREV",
html: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" tabindex="-1"><path d="M15 4l-8 8 8 8"/></svg>',
click: function (event) {
event.preventDefault();

this.fancybox.prev();
},
},
next: {
type: "button",
class: "fancybox__button--next",
label: "NEXT",
html: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" tabindex="-1"><path d="M8 4l8 8-8 8"/></svg>',
click: function (event) {
event.preventDefault();

this.fancybox.next();
},
},
fullscreen: {
type: "button",
class: "fancybox__button--fullscreen",
label: "TOGGLE_FULLSCREEN",
html: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" tabindex="-1">
<g><path d="M3 8 V3h5"></path><path d="M21 8V3h-5"></path><path d="M8 21H3v-5"></path><path d="M16 21h5v-5"></path></g>
<g><path d="M7 2v5H2M17 2v5h5M2 17h5v5M22 17h-5v5"/></g>
</svg>`,
click: function (event) {
event.preventDefault();

if (Fullscreen.element()) {
Fullscreen.deactivate();
} else {
Fullscreen.activate(this.fancybox.$container);
}
},
},
slideshow: {
type: "button",
class: "fancybox__button--slideshow",
label: "TOGGLE_SLIDESHOW",
html: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" tabindex="-1">
<g><path d="M6 4v16"/><path d="M20 12L6 20"/><path d="M20 12L6 4"/></g>
<g><path d="M7 4v15M17 4v15"/></g>
</svg>`,
click: function (event) {
event.preventDefault();

this.Slideshow.toggle();
},
},
zoom: {
type: "button",
class: "fancybox__button--zoom",
label: "TOGGLE_ZOOM",
html: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" tabindex="-1"><circle cx="10" cy="10" r="7"></circle><path d="M16 16 L21 21"></svg>',
click: function (event) {
event.preventDefault();

const panzoom = this.fancybox.getSlide().Panzoom;

if (panzoom) {
panzoom.toggleZoom();
}
},
},
download: {
type: "link",
label: "DOWNLOAD",
class: "fancybox__button--download",
html: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" tabindex="-1"><path d="M12 15V3m0 12l-4-4m4 4l4-4M2 17l.62 2.48A2 2 0 004.56 21h14.88a2 2 0 001.94-1.51L22 17"/></svg>',
click: function (event) {
event.stopPropagation();
},
},
thumbs: {
type: "button",
label: "TOGGLE_THUMBS",
class: "fancybox__button--thumbs",
html: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" tabindex="-1"><circle cx="4" cy="4" r="1" /><circle cx="12" cy="4" r="1" transform="rotate(90 12 4)"/><circle cx="20" cy="4" r="1" transform="rotate(90 20 4)"/><circle cx="4" cy="12" r="1" transform="rotate(90 4 12)"/><circle cx="12" cy="12" r="1" transform="rotate(90 12 12)"/><circle cx="20" cy="12" r="1" transform="rotate(90 20 12)"/><circle cx="4" cy="20" r="1" transform="rotate(90 4 20)"/><circle cx="12" cy="20" r="1" transform="rotate(90 12 20)"/><circle cx="20" cy="20" r="1" transform="rotate(90 20 20)"/></svg>',
click: function (event) {
event.stopPropagation();

const thumbs = this.fancybox.plugins.Thumbs;

if (thumbs) {
thumbs.toggle();
}
},
},
close: {
type: "button",
label: "CLOSE",
class: "fancybox__button--close",
html: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" tabindex="-1"><path d="M20 20L4 4m16 0L4 20"></path></svg>',
tabindex: 1,
click: function (event) {
event.stopPropagation();
event.preventDefault();

this.fancybox.close();
},
},
}

Example how to change an item:

Fancybox.Plugins.Toolbar.defaults.items.counter.position = "center";

Example of how to add additional items (demo):

Fancybox.Plugins.Toolbar.defaults.items.zoomIn = {
type: "button",
class: "fancybox__button--zoomIn",
label: "Zoom in",
html: '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M21 21l-4.486-4.494M19 10.5a8.5 8.5 0 1 1-17 0 8.5 8.5 0 0 1 17 0z"/><path d="M10.5 7v3.5m0 0V14m0-3.5H14m-3.5 0H7"/></svg>',
click: function (event) {
event.preventDefault();

const panzoom = this.fancybox.getSlide().Panzoom;

if (panzoom) {
panzoom.zoomIn();
}
},
};

Fancybox.Plugins.Toolbar.defaults.items.zoomOut = {
type: "button",
class: "fancybox__button--zoomOut",
label: "Zoom in",
html: '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M21 21l-4.486-4.494M19 10.5a8.5 8.5 0 1 1-17 0 8.5 8.5 0 0 1 17 0z"/><path d="M13 10.5H8"/></svg>',
click: function (event) {
event.preventDefault();

const panzoom = this.fancybox.getSlide().Panzoom;

if (panzoom) {
panzoom.zoomOut();
}
},
};

Fancybox.bind('[data-fancybox="gallery"]', {
Toolbar: {
display: [
"counter",
"zoomIn",
"zoomOut",
"slideshow",
"fullscreen",
"thumbs",
"close",
],
},
});