Fullscreen Lightbox Javascript Fullscreen Lightbox React Fullscreen Lightbox Vue

Vue Lightbox Documentation

Official Vue fslightbox guide!

Other props

disableLocalStorage - to improve performance lightbox caches detected types in local storage, if you dont't want that you set this boolean prop to true. It's useful when you are taking sources with different types from same url e.g.

<FsLightbox
:toggler="toggler"
:sources="['https//videosandimages.s3.com']"
:disableLocalStorage"true"
/>

exitFullscreenOnClose - boolean, if set to true lightbox will exit fullscreen on close.

maxYoutubeVideoDimensions - object with width and height number property, declares max dimensions of YouTube videos, if not set default dimensions are: width - 1920(px), height - 1080(px)

openOnMount - boolean, if set to true lightbox will open on mount

slideDistance - number, distance between slides (x * window.innerWidth), default - 0.3

videosPosters - array with strings, declare videos posters e.g.

<FsLightbox
:toggler="toggler"
:sources="['images/1.jpg', 'videos/video.mp4']"
:videosPosters"[null, 'images/2.jpg']"
/>
<FsLightbox
:toggler="toggler"
:sources="['https://www.youtube.com/watch?v=xshEZzpS4CQ']"
:maxYoutubeVideoDimensions"{ width: 1920, height: 1080 }"
/>
<FsLightbox
:toggler="toggler"
:sources="['source']"
:slideDistance="0.5"
/>

toolbarButtons Pro - object prop, with it you can edit icon of every default button in toolbar.

<FsLightbox
:toggler="toggler"
:sources="['source']"
:toolbarButtons="{
thumbs: {
viewBox: '0 0 32 32',
width: '40px',
height: '40px',
d: 'M 6 3 A 1 1 0 0 0 5 4 A 1 1 0 0 0 5 4.0039062',
title: 'Thumbnails'
},
zoomIn: {
width: '40px',
},
zoomOut: {
height: '30px'
},
close: {
height: '32px'
},
fullscreen: {
enter: {
d: 'M121',
},
exit: {
title: 'Fullscreen - exit'
}
},
slideshow: {
start: {
d: 'M123',
},
pause: {
viewBox: '0 0 31 31',
}
}
}"
/>

There are 5 editable properties for each button: viewBox, width, height, d and title. In above example you can see how to edit some properties of every icon.

slideButtons Pro - object prop, with it you can edit icon of previous and next slide button.

<FsLightbox
:toggler="toggler"
:sources="['source']"
:slideButtons="{
previous: {
viewBox: '0 0 32 32',
width: '40px',
height: '40px',
d: 'M 6 3 A 1 1 0 0 0 5 4 A 1 1 0 0 0 5 4.0039062',
title: 'Left'
},
next: {
width: '40px'
}
}"
/>

slideshowTime Pro - number prop. With turned on slideshow - time that needs to pass to change slide to next one (in milliseconds).

UIFadeOutTime Pro - number prop. Time after UI fades out (in milliseconds).

Get connected wth us on social networks!