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.
