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=xshEZzpS4CQ',
'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=xshEZzpS4CQ',
'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>
How to pass props to custom sources?
Important!
Sources prop is not reactive. If you want to display new sources you need to remount lightbox. In most cases best solution is to use Vue key prop. When this prop updates Vue remounts component.
<template>
<div>
<button @click="toggler = !toggler">
Toggle Lightbox
</button>
<button @click="productIndex = 1">
Load second product
</button>
<FsLightbox
:toggler="toggler"
:sources="productsImages[productIndex]"
:key="productIndex"
/>
</div>
</template>
<script>
import FsLightbox from "fslightbox-vue";
export default {
components: { FsLightbox },
props: {
productsImages: Array
},
data() {
return {
toggler: false,
productIndex: 0,
}
}
}
</script>
<div>
<button @click="toggler = !toggler">
Toggle Lightbox
</button>
<button @click="productIndex = 1">
Load second product
</button>
<FsLightbox
:toggler="toggler"
:sources="productsImages[productIndex]"
:key="productIndex"
/>
</div>
</template>
<script>
import FsLightbox from "fslightbox-vue";
export default {
components: { FsLightbox },
props: {
productsImages: Array
},
data() {
return {
toggler: false,
productIndex: 0,
}
}
}
</script>