Custom sources
With the "sources" prop you can also display custom content—such as a Vimeo video, Google map, etc. A custom source must be a Vue component.
<template>
<div>
<button @click="toggler = !toggler">
Open the 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
}
},
created() {
this.CustomSource = CustomSource;
}
}
</script>An example custom source (a Vimeo video):
<template>
<iframe
src="https://player.vimeo.com/video/22439234"
width="1920px"
height="1080px"
frameBorder="0"
allow="autoplay; fullscreen"
allowFullScreen
/>
</template>