Fullscreen Lightbox Javascript Fullscreen Lightbox React Fullscreen Lightbox Vue

Vanilla JS Lightbox Documentation

Official Fullscreen Lightbox guide!

How to use

Every <a> tag with data-fslightbox attribute opens a lightbox. Value of href attribute will be shown in your box.

<a data-fslightbox href="https://i.imgur.com/fsyrScY.jpg">
<img src="exampleImage.jpg">
</a>

There is no need to place a specified content inside of <a> tag.

<a data-fslightbox href="/img/example-image.jpg">
John Doe
</a>

Instances

Every unique value of data-fslightbox will be treated as instance. To access specific instance, use it's methods, attach events to it you need to use global fsLightboxInstances object.

<a data-fslightbox="first-lightbox" href="/img/1.jpg">First Lightbox</a>
<a data-fslightbox="second-lightbox" href="/img/2.jpg">Second Lightbox</a>

<script src="fslightbox.min.js"></script>
<script>
fsLightboxInstances['first-lightbox'].open(0);
fsLightboxInstances['second-lightbox'].props.onOpen = () => console.log('Lightbox open!');
</script>

If you have only one instance at page you can access it via global fsLightbox object.

fsLightbox.close();

Refreshing

After adding new <a> tags to detect new lightboxes or update existing ones use global refreshFsLightbox() function.

const a = document.createElement('a');
a.setAttribute('data-fslightbox', 'gallery');
a.setAttribute('href', 'images/2.jpg');
document.body.appendChild(a);

refreshFsLightbox();
Get connected wth us on social networks!