Vue Fullscreen Lightbox
An overview.
A simple and powerful lightbox as a Vue.js component.
A Vue.js plug-in for displaying images, videos, or, through custom sources, anything you want in a clean overlying box. Supports SSR.
Learn more about Vue FsLightbox!
<template>
<div>
<button @click="toggler = !toggler">
Toggle Lightbox
</button>
<FsLightbox
:toggler="toggler"
:sources="[
'https://i.imgur.com/fsyrScY.jpg',
'https://www.youtube.com/watch?v=3nQNiWdeH2Q',
'https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4'
]"
/>
</div>
</template>
<script>
import FsLightbox from "fslightbox-vue";
// import FsLightbox from "fslightbox-vue/v3"; for Vue v3
export default {
components: { FsLightbox },
data() {
return {
toggler: false
}
}
}
</script>
If you want to see more advanced options, visit the documention.
Check out how basic version of Vue Fullscreen Lightbox works.
Check out how pro version of Fullscreen Lightbox works!
Basic version is available under
MIT license.
Pro version license is available here.
Pro
Size: 74.0K
Thumbnails
Zooming
More toolbar buttons
Captions
More animations available