Fullscreen Lightbox Javascript Fullscreen Lightbox React Fullscreen Lightbox Vue

Vanilla JS Lightbox Documentation

Official Fullscreen Lightbox guide!

Other props

Disabling local storage

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

fsLightboxInstances['gallery'].props.disableLocalStorage = true;

Videos posters

To display video poster you can use data-video-poster attribute at video <a> tag.

<a
data-fslightbox="lightbox"
data-video-poster="/img/1.jpg"
href="videos/video.mp4">
Video
</a>

Or array prop with images.

fsLightboxInstances['gallery'].props.videosPosters = ['/img/1.jpg'];

Youtube max dimensions

Lightbox cannot detect max sizes of YouTube videos. To manage that you can use data-width and data-height attributes.

<a
data-fslightbox="lightbox"
data-width="1000"
data-height="500"
href="https://www.youtube.com/watch?v=xshEZzpS4CQ">
YouTube
</a>

Or object prop.

fsLightboxInstances['gallery'].props.maxYoutubeDimensions = { width: 1920, height: 1080 };

Load only current source

By default lightbox at open loads 3 stage sources (previous, current, next). If loadOnlyCurrentSource prop is set to true lightbox will load only current source.

fsLightboxInstances['gallery'].props.loadOnlyCurrentSource = true;

Slide distance

Distance between slides (x * window.innerWidth), default - 0.3

fsLightboxInstances['gallery'].props.slideDistance = 0.5;

Svg Pro

To edit default svg of toolbar and slide buttons you can overwrite special props:

fsLightboxInstances['gallery'].props.toolbarButtons.thumbs = {
width: '17px',
height: '17px',
viewBox: '0 0 22 22',
d: 'M 3 2 C 2.448 2 2 2.448 2 3 L 2 6 C 2 6.552 2.448 7 3 7 L 6 7 C 6.552 7 7 6.552 7 6 L 7 3 C 7 2.448 6.552 2 6 2 L 3 2 z M 10 2 C 9.448 2 9 2.448 9 3 L 9 6 C 9 6.552 9.448 7 10 7 L 13 7 C 13.552 7 14 6.552 14 6 L 14 3 C 14 2.448 13.552 2 13 2 L 10 2 z M 17 2 C 16.448 2 16 2.448 16 3 L 16 6 C 16 6.552 16.448 7 17 7 L 20 7 C 20.552 7 21 6.552 21 6 L 21 3 C 21 2.448 20.552 2 20 2 L 17 2 z M 3 9 C 2.448 9 2 9.448 2 10 L 2 13 C 2 13.552 2.448 14 3 14 L 6 14 C 6.552 14 7 13.552 7 13 L 7 10 C 7 9.448 6.552 9 6 9 L 3 9 z M 10 9 C 9.448 9 9 9.448 9 10 L 9 13 C 9 13.552 9.448 14 10 14 L 13 14 C 13.552 14 14 13.552 14 13 L 14 10 C 14 9.448 13.552 9 13 9 L 10 9 z M 17 9 C 16.448 9 16 9.448 16 10 L 16 13 C 16 13.552 16.448 14 17 14 L 20 14 C 20.552 14 21 13.552 21 13 L 21 10 C 21 9.448 20.552 9 20 9 L 17 9 z M 3 16 C 2.448 16 2 16.448 2 17 L 2 20 C 2 20.552 2.448 21 3 21 L 6 21 C 6.552 21 7 20.552 7 20 L 7 17 C 7 16.448 6.552 16 6 16 L 3 16 z M 10 16 C 9.448 16 9 16.448 9 17 L 9 20 C 9 20.552 9.448 21 10 21 L 13 21 C 13.552 21 14 20.552 14 20 L 14 17 C 14 16.448 13.552 16 13 16 L 10 16 z M 17 16 C 16.448 16 16 16.448 16 17 L 16 20 C 16 20.552 16.448 21 17 21 L 20 21 C 20.552 21 21 20.552 21 20 L 21 17 C 21 16.448 20.552 16 20 16 L 17 16 z',
title: 'Thumbnails'
};
fsLightboxInstances['gallery'].props.toolbarButtons.zoomIn.width = '20px';
fsLightboxInstances['gallery'].props.toolbarButtons.zoomOut.height = '22px';
fsLightboxInstances['gallery'].props.toolbarButtons.zoomIn.viewBox = '0 0 20 20';
fsLightboxInstances['gallery'].props.toolbarButtons.slideshow.start.width = '25px';
fsLightboxInstances['gallery'].props.toolbarButtons.slideshow.pause.width = '20px';
fsLightboxInstances['gallery'].props.toolbarButtons.fullscreen.enter.title = 'Show';
fsLightboxInstances['gallery'].props.toolbarButtons.fullscreen.exit.title = 'Stop';
fsLightboxInstances['gallery'].props.toolbarButtons.close.viewBox = '0 0 25 25';

fsLightboxInstances['gallery'].props.slideButtons.previous.width = '15px';
fsLightboxInstances['gallery'].props.slideButtons.next.width = '24px';

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 in every button.

Slideshow time Pro

With turned on slideshow - time that need to pass to change slide te next (in milliseconds).

fsLightboxInstances['gallery'].props.slideshowTime = 10000;

UI fade out time Pro

Time after UI is fades out (in milliseconds).

fsLightboxInstances['gallery'].props.UIFadeOutTime = 10000;
Get connected wth us on social networks!