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>
<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!