Fullscreen Lightbox Javascript Fullscreen Lightbox React Fullscreen Lightbox Vue

Vue Lightbox Documentation

Official Vue fslightbox guide!

Control slide number

If you are making gallery it's often useful to open lightbox on specific slide not the first one. There comes three props:

slide: - you can pass here slide number directly: 1 (first slide), 2 (second slide) etc.
sourceIndex: - you can pass here source index that you want to display: 0 (first slide), 1 (second slide) etc.
source - you can pass here full source name that you want to display: 'images/1.jpg' (first slide), 'videos/2.mp4' (second slide) etc.

<template>
<div>
<button @click="openLightboxOnSlide(1)">
Open lightbox on first slide
</button>

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

<FsLightbox
:toggler="toggler"
:slide="slide"
:sources="['img/1.jpg', 'img/2.bmp']"
/>
</div>
</template>

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

In above example we used slide prop. Others (sourceIndex, source) are used similarly. Choose one that suits you best!

Get connected wth us on social networks!