Fullscreen Lightbox Javascript Fullscreen Lightbox React Fullscreen Lightbox Vue

Vue Lightbox Documentation

Official Vue fslightbox guide!

Thumbs of images are created automatically, if you want to set thumbs of other sources or overwrite default ones you need to use thumbs prop (array of urls).

<FsLightbox
:toggler="toggler"
:sources="[
'images/first.jpg',
'https://www.youtube.com/watch?v=xshEZzpS4CQ',
'videos/video.mp4'
]"
:thumbs="[
null,
'images/second.png',
'images/third.jpg'
]"
/>

In above example first source is image so we don't need to set it's thumb (if you want to set different one than image itself - you can, no problem). For the next sources (video and YouTube) we set thumb manually.

Thumbs icons

When displaying videos showing icons on thumbs may improve user experience. To do that you need to use thumbsIcons prop. It's an array of components (How to pass props to components?).

<FsLightbox
:toggler="toggler"
:sources="[
'https://www.youtube.com/watch?v=xshEZzpS4CQ',
'videos/video.mp4'
]"
:thumbs="[
'image/youtube-thumb.jpg',
'image/video-thumb.jpg'
]"
:thumbsIcons="[
YoutubeIcon,
VideoIcon
]"
/>

In above example we displayed YouTube and Vimeo videos, attached thumbs to it and displayed on those thumbs fitting icons.

Show thumbs on mount

If you want to display thumbs on lightbox mount set showThumbsOnMount prop to true.

<FsLightbox
:toggler="toggler"
:sources="['https://i.imgur.com/fsyrScY.jpg']"
:showThumbsOnMount="true"
/>

Disable thumbs

If you want to disable thumbs completely set disableThumbs prop to true.

<FsLightbox
:toggler="toggler"
:sources="['https://i.imgur.com/fsyrScY.jpg']"
:disableThumbs="true"
/>
Get connected wth us on social networks!