Fullscreen Lightbox Javascript Fullscreen Lightbox ,React Fullscreen Lightbox Vue

Vue Lightbox Documentation

Learn how to use the Vue version of Fullscreen Lightbox.

Other props

disableLocalStorage

To improve the performance, the lightbox caches detected types in the local storage. To disable it, set the "disableLocalStorage" prop to "true".

<FsLightbox
:disableLocalStorage="true"
/>

exitFullscreenOnClose

By default, the lightbox won't exit the fullscreen on close. To change it, set the "exitFullscreenOnClose" prop to "true".

<FsLightbox
:exitFullscreenOnClose="true"
/>

loadOnlyCurrentSource

By default, the lightbox loads 3 stage sources—after opening and after a slide change—previous, current, and next. If the "loadOnlyCurrentSource" prop is set to "true", the lightbox will load only the current source.

<FsLightbox
:loadOnlyCurrentSource="true"
/>

maxYoutubeVideoDimensions

The lightbox cannot detect maximum sizes of YouTube videos (however, by default it sets them to 1920 × 1080). To change them use the "maxYoutubeVideoDimensions" object prop.

<FsLightbox
:maxYoutubeVideoDimensions="{ width: 1920, height: 1080 }"
/>

slideDistance

The distance between the slides visible during swiping—x * window.innerWidth (by default, 0.3).

<FsLightbox
:slideDistance="0.5"
/>

Customizing buttons Pro

To edit the properties of the toolbar and slide buttons, overwrite adequate props in an analogous way to the given example (there are 5 editable props for each button):

<FsLightbox
: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",
}
}
}"
: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

When slideshow is turned on, the time that needs to pass to change the slide to the next one (in milliseconds).

<FsLightbox
:slideshowTime="10000"
/>

UIFadeOutTime Pro

The time after which the lightbox's UI fades out (in milliseconds).

<FsLightbox
:UIFadeOutTime="10000"
/>

zoomIncrement Pro

The value that increases the source's scale on a click zoom (by default, 0.25—that is, the size of the source is increased by 25%).

<FsLightbox
:zoomIncrement="0.5"
/>
Look over the Fullscreen Lightbox open source plug-ins.