Toolbar

Custom 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;
}