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">

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

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


Every unique value of data-fslightbox will be treated as instance. To access specific instance, use its 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>
fsLightboxInstances['second-lightbox'].props.onOpen = () => console.log('Lightbox open!');

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



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');



You can also create lightbox using global FsLightbox class. Instatiate it and set up props.
After opening lightbox props changes won't take effect!

const lightbox = new FsLightbox();

// set up props, like sources, types, events etc.
lightbox.props.sources = ['example-image.jpg', 'example-video.mp4'];
lightbox.props.onInit = () => console.log('Lightbox initialized!');


Available methods (names speak for themselves):

Get connected wth us on social networks!