Fullscreen Lightbox Javascript Fullscreen Lightbox React Fullscreen Lightbox Vue

Vue Lightbox Documentation

Official Vue fslightbox guide!

How to use

Lightbox will be created from urls given in sources props. You don't need to specify content type, lightbox will do it for you. To work component requires at least two props:

toggler - on every update of this prop lightbox will close or open (depending on current state).
Lightbox is closed and toggler is being updated - lightbox opens.
Lightbox is opened and toggler is being updated - lightbox closes.

sources - array with urls, which will be displayed in lightbox.

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

<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'
]"
/>
</div>
</template>

<script>
import FsLightbox from "fslightbox-vue";
export default {
components: { FsLightbox },
data() {
return {
toggler: false
}
}
}
</script>
Get connected wth us on social networks!