Fullscreen Lightbox Javasript
Fullscreen Lightbox React

Vanilla Javascript Lightbox Documentation

Learn how to use Vanilla Javascript Fullscreen Lightbox!

Vanilla JavaScript Fullscreen Lightbox - Basic


Fullscreen Lightbox is library written in pure JavaScript without any additional dependencies. You can show images and videos in full window overlaying box. Have fun!


Fullscreen Lightbox was successfully tested on following browsers:

  • Google Chrome
  • Mozilla Firefox
  • Microsoft Edge
  • Internet Explorer 11
  • Opera


Include JavaScript and CSS files

Download library files from here and add them to your code. Be sure to use minified files in production version.

In head tag:

<link rel="stylesheet" href="fslightbox.min.css">

Just before end of body tag:

<script src="fslightbox123123.min.js"><script>


You can download build files via command:

$ npm install fslightbox

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="exampleImage.jpg">
<img src="exampleImage.jpg">

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

<a data-fslightbox href="exampleImage.jpg">
John Doe


You can form gallery by adding to multiple <a> tags data-fslightbox attributes with same values.

<a data-fslightbox="example-gallery" href="exampleImage1.jpg">
<img src="exampleImage1.jpg">

<a data-fslightbox="example-gallery" href="exampleImage2.jpg">
<img src="exampleImage2.jpg">


For images give url or file path into href attribute.

<a data-fslightbox="example-image" href="exampleImage1.jpg">
<img src="exampleImage1.jpg">


For videos give url or file path into href attribute and optionally add data-video-poster attribute with link to image that will be poster of the video.

<a data-fslightbox="example-video" data-video-poster="BigBunnyPoster.jpg" href="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4">
Show video


You can show YouTube videos by giving direct link to it. It's important to use normal link not a shorter version.

<a data-fslightbox="example-youtube-video" href="https://www.youtube.com/watch?v=jNQXAC9IVRw">
<img src="exampleImage1.jpg">


Every gallery you create refers to an instance with the same name as gallery.

// this gallery refers to one instance named "gallery-1"
<a data-fslightbox="gallery-1" href="exampleImage1.jpg">
<img src="exampleImage1.jpg">
<a data-fslightbox="gallery-1" href="exampleImage2.jpg">
<img src="exampleImage2.jpg">

// this one refers to different instance named "gallery-2"
<a data-fslightbox="gallery-2" href="exampleImage3.jpg">
<img src="exampleImage3.jpg">

If you have only one Fullscreen Lightbox gallery on a page you can access it using fsLightbox object.


If you have more than one Fullscreen Lightbox gallery on a page, instances of lightbox will be stored in fsLightboxInstances object. You can access any of them you want by giving it's name as a key.


If you want to do same thing on every instance you can use e.g. forEach.

fsLightboxInstances.forEach(function (instance) {
instance.element.addEventListener('init', function(){


You can access instances only after adding library files into your code!


There are a few options you can edit in your boxes.

fsLightboxInstances.forEach(function (instance) {

// hide certain toolbar buttons
instance.data.toolbarButtons.fullscreen = false;
instance.data.toolbarButtons.close = false;

// hide slide buttons
instance.data.slideButtons = false;

// hide slide counter
instance.data.slideCounter = false;

// distance between slides (x * window.innerWidth)
// default - 1.3
instance.data.slideDistance = 1.3;



// initialize instance on given slide

// shows a previously initialized instance

// closes an instance


How to use Fullscreen Lightbox custom events

// you need to add event listneres to element property of lightbox instance
fsLightbox.element.addEventListener('open', function(){});

Available events

Event When fired?
open Every time instance is opened (both show and initialize).
close Every time instance is closed.
init When instance is opened for the first time.
show When opening instance after initial open.


I've created html file, set local paths to images but lightbox doesn't work!

I assume you are only testing library right? Fullscreen Lightbox uses HTTP requests to detect sources types, so you need web server to run library. It can be the simplest local server. E.g. you can use node http-server. It's really simply to install:

// command for installing globally http-server via npm
npm install http-server -g

// go to directory where you store html file and to run server run command:
http-server ./

Opening and closing cause fixed elements to jump

You need to add to element with fixed position class recompense-for-scrollbar.

<div class="im-fixed recompense-for-scrollbar"></div>

When protocol is HTTPS using url with HTTP protocol throws error.

You need to add to <head> tag following line:

<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">

Unfortunately it's now cross-browser fix (don't work in IE).
If you want to be sure that it will work you need to download source, put it on server and than give url that points to it.

When protocol is HTTP using url with HTTPS protocol throws error.

Unfortunately it's not possible to fix due to Same Origin Policy.
The only thing you can do is to download source, put it on server and than give url that points to it.

Get connected with us on social networks!