Fullscreen Lightbox Javascript Fullscreen Lightbox ,React Fullscreen Lightbox Vue

Vue Lightbox Documentation

Learn how to use the Vue version of Fullscreen Lightbox.

Control slide number

To open the gallery on a different slide than the first, specify the desired slide by using one of the three props: "slide" (integer), "sourceIndex" (integer, slide number minus one), or "source" (string, the source's URL or path itself).

<button @click="openLightboxOnSlide(1)">
Open the lightbox on the first slide.

<button @click="openLightboxOnSlide(2)">
Open the lightbox on the second slide.


import FsLightbox from "fslightbox-vue";

export default {
components: { FsLightbox },
data() {
return {
toggler: false,
slide: 1
methods: {
openLightboxOnSlide: function(number) {
this.slide = number;
this.toggler = !this.toggler;

In the above example there is presented the usage of the "slide" prop. The two other props—"sourceIndex" and "source"—are used analogously.

Look over the Fullscreen Lightbox open source plug-ins.