Fullscreen Lightbox Javascript Fullscreen Lightbox ,React Fullscreen Lightbox Vue

React Lightbox Documentation

Learn how to use the React 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
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.