Fullscreen Lightbox Javascript Fullscreen Lightbox ,React Fullscreen Lightbox Vue

Vanilla JS Lightbox Documentation

Learn how to use the Vanilla JavaScript version of Fullscreen Lightbox.

How to use

Every <a> element (anchor element) with the "data-fslightbox" attribute opens the lightbox. The content behind the URL or path passed to the "href" attribute will be displayed in the lightbox.

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

There is no need to place anything specific inside of an <a> element.

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

Instances

Every unique value of the "data-fslightbox" attribute will be treated as an instance (or gallery).
To access a specific instance, use its methods, attach events to it, etc., you need to use the global JavaScript "fsLightboxInstances" object.

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

<script src="fslightbox.min.js"></script>
<script>
fsLightboxInstances["first-lightbox"].props.onOpen = function () {
console.log("The first lightbox has opened.");
}
fsLightboxInstances["second-lightbox"].props.onOpen = function () {
console.log("The second lightbox has opened.");
}
</script>

If you have only one instance on a page, you can access it using the global"fsLightbox" object. (You can use this object when you have multiple instances as well, but it will affect only the one that is declared last.)

fsLightbox.open();

Refreshing

To incorporate new galleries or updates of existing ones (through adding or modifying <a> elements), invoke the global "refreshFsLightbox" function.

var a = document.createElement("a");
a.setAttribute("data-fslightbox", "gallery");
a.setAttribute("href", "/Images/2.jpg");
document.body.appendChild(a);
refreshFsLightbox();

Through JavaScript

Create a lightbox by instantiating the global "FsLightbox" function. Provide sources by setting up the "sources" array prop (different props are described in the consecutive documentation sections). Open the lightbox with the "open" method, optionally passing the index of a source you want to open (the slide number minus one); you can close it programmatically with the "close" method.
After opening the lightbox, props changes won't take effect.

var lightbox = new FsLightbox();
lightbox.props.sources = ["/Image.jpg", "/Video.mp4"];
lightbox.open();
lightbox.close();
lightbox.open(1); // Opens the lightbox at the slide number 2.
Look over the Fullscreen Lightbox open source plug-ins.