Fullscreen Lightbox Javascript Fullscreen Lightbox ,React Fullscreen Lightbox Vue

Vanilla JS Lightbox Documentation

Learn how to use the Vanilla JavaScript version of Fullscreen Lightbox.

Custom buttons can be added to the toolbar using the "customToolbarButtons" array prop. The required properties of each button:

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;
}
Look over the Fullscreen Lightbox open source plug-ins.