Fullscreen Lightbox Javascript Fullscreen Lightbox React Fullscreen Lightbox Vue

Vanilla JS Lightbox Documentation

Official Fullscreen Lightbox guide!

Thumbs of images are created automatically, if you want to set thumbs of other sources you need to use data-thumb attribute. Just pass url of thumb you want do display:

<a
data-fslightbox="gallery"
data-thumb="/images/example-thumbnail.jpg"
href="https://www.youtube.com/watch?v=xshEZzpS4CQ">
Youtube video
</a>

Or using javascript: thumbs property (array of urls).

fsLightboxInstances['gallery'].props.thumbs = ['/images/example-thumbnail.jpg'];

Thumbs icons

When displaying videos showing icons on thumbs may improve user experience. To do that you need to use thumbsIcons array property.

const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
svg.setAttributeNS(null, 'width', '30px');
svg.setAttributeNS(null, 'height', '30px');
svg.setAttributeNS(null, 'viewBox', '0 0 512 512');

const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
path.setAttributeNS(null, 'd', 'M490.24,113.92c-13.888-24.704-28.96-29.248-59.648-30.976C399.936,80.864,322.848,80,256.064,80 c-66.912,0-144.032,0.864-174.656,2.912c-30.624,1.76-45.728,6.272-59.744,31.008C7.36,138.592,0,181.088,0,255.904 C0,255.968,0,256,0,256c0,0.064,0,0.096,0,0.096v0.064c0,74.496,7.36,117.312,21.664,141.728 c14.016,24.704,29.088,29.184,59.712,31.264C112.032,430.944,189.152,432,256.064,432c66.784,0,143.872-1.056,174.56-2.816 c30.688-2.08,45.76-6.56,59.648-31.264C504.704,373.504,512,330.688,512,256.192c0,0,0-0.096,0-0.16c0,0,0-0.064,0-0.096 C512,181.088,504.704,138.592,490.24,113.92z M192,352V160l160,96L192,352z');

svg.appendChild(path);

fsLightboxInstances['gallery'].props.thumbsIcons = [svg];

Disable thumbs

To disable thumbs completely set disableThumbs property to true.

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

Display thumbs at start

To show thumbs at lightbox open set showThumbsOnMount property to true.

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