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=3nQNiWdeH2Q',
'https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4'
]"
/>
: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'
]"
/>
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>
<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>
<iframe src="https://player.vimeo.com/video/22439234" width="1920px" height="1080px"
frameBorder="0" allow="autoplay; fullscreen" allowFullScreen />
</template>