Toolbar
Pro featureCustom buttons can be added to the toolbar using the "customToolbarButtons" array prop. The required properties of each button:
- viewBox—a required property of the button's SVG icon
- d—a required property of the SVG icon
- width—a required property of the SVG icon
- height—a required property of the SVG icon
- title—the text that will be displayed on a button hover
- onClick—the action that will be called after a click with the lightbox's instance as an argument
Here's an example presenting adding of a download button:
fsLightbox.props.customToolbarButtons = [{
viewBox: "0 0 16 16",
d:"M0 14h16v2h-16v-2z M8 13l5-5h-3v-8h-4v8h-3z",
width: "16px",
height: "16px",
title: "Download",
onClick: function(instance) {
var URL = instance.props.sources[instance.stageIndexes.current];
var a = document.createElement("a");
a.href = URL;
a.setAttribute("download", "");
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
}
}];
By default, custom buttons will be displayed at the beginning of the toolbar. If you want to change it, write some CSS code:
/* for example, let's reverse the order of all buttons (with the download button added) */
.fslightbox-toolbar-button:nth-child(1) {
order: 7;
}
.fslightbox-toolbar-button:nth-child(2) {
order: 6;
}
.fslightbox-toolbar-button:nth-child(3) {
order: 5;
}
.fslightbox-toolbar-button:nth-child(4) {
order: 4;
}
.fslightbox-toolbar-button:nth-child(5) {
order: 3;
}
.fslightbox-toolbar-button:nth-child(6) {
order: 2;
}
.fslightbox-toolbar-button:nth-child(7) {
order: 1;
}