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?

Get connected wth us on social networks!