Fullscreen Lightbox Javascript Fullscreen Lightbox React Fullscreen Lightbox Vue

Vanilla JS Lightbox Documentation

Official Fullscreen Lightbox guide!

Other props

disableLocalStorage

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;

exitFullscreenOnClose

By default lightbox won't exit fullscreen on close. To enable that set exitFullscreenOnClose prop to true.

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

loadOnlyCurrentSource

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;

maxYoutubeDimensions

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 };

slideDistance

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.

slideshowTime Pro

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

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

UIFadeOutTime Pro

Time after UI is fades out (in milliseconds).

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

zoomIncrement Pro

A value that increases the scale on click zoom. Default: 0.25

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