Fullscreen Lightbox Javascript Fullscreen Lightbox ,React Fullscreen Lightbox Vue

Vue Lightbox Documentation

Learn how to use the Vue 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:

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