Fullscreen Lightbox Javascript Fullscreen Lightbox React Fullscreen Lightbox Vue

Vue Lightbox Documentation

Official Vue fslightbox guide!

Sources

To display images, HTML videos, YouTube videos you need to use sources array prop. Just pass urls or paths of your sources.

<FsLightbox
:toggler="toggler"
:sources="[
'images/random-image.jpg',
'https://i.imgur.com/fsyrScY.jpg',
'https://www.youtube.com/watch?v=xshEZzpS4CQ',
'https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4'
]"
/>

Custom sources

With sources prop you can also display content such as Vimeo videos, Google maps, whatever you want. Custom source needs to be Vue component:

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

<FsLightbox
:toggler="toggler"
:sources="[CustomSource]"
/>
</div>
</template>

<script>
import FsLightbox from "fslightbox-vue";
import CustomSource from "./CustomSource.vue"

export default {
components: { FsLightbox },
data() {
return {
toggler: false,
CustomSource: CustomSource
}
}
}
</script>

Example custom source (Vimeo video):

<template>
<iframe src="https://player.vimeo.com/video/22439234" width="1920px" height="1080px"
frameBorder="0" allow="autoplay; fullscreen" allowFullScreen />
</template>

How to pass props to custom sources?

Important!

Sources prop is not reactive. If you want to display new sources you need to remount lightbox. In most cases best solution is to use Vue key prop. When this prop updates Vue remounts component.

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