Fullscreen Lightbox Javascript Fullscreen Lightbox ,React Fullscreen Lightbox Vue

Vue Lightbox Documentation

Official Vue fslightbox guide!

Updating props

Lightbox is not reactive to props changes other than toggler and slide controls. To update them you need to remount lightbox. In most cases best solution is to use Vue key prop, after updating it Vue remounts component.

Example with updating sources:

<template>
<div>
<button @click="toggler = !toggler">
Toggle Lightbox
</button>

<button @click="productIndex = 1">
Load second product
</button>

<FsLightbox
:toggler="toggler"
:sources="productsImages[productIndex]"
:key="productIndex"
/>
</div>
</template>

<script>
import FsLightbox from "fslightbox-vue";

export default {
components: { FsLightbox },
props: {
productsImages: Array
},
data() {
return {
toggler: false,
productIndex: 0,
}
}
}
</script>
Get connected wth us on social networks!