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 an adding of a download button:

<template>
<div>
	<FsLightbox
		: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: download
			}
		]"
	/>
</div>
</template>

<script>
import FsLightbox from "fslightbox-vue";
export default {
	components: { FsLightbox },
	methods: {
		download(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);
		}
	}
}
</script>

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