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=3nQNiWdeH2Q',
'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>
<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=3nQNiWdeH2Q',
'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>
Vue 3
Import FsLightbox from v3.js file:
import FsLightbox from "fslightbox-vue/v3";