Vanilla Javascript Lightbox Documentation

Learn how to use Vanilla Javascript Fullscreen Lightbox!

Vanilla JavaScript Fullscreen Lightbox - Basic

About

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!

Browsers

Fullscreen Lightbox was successfully tested on following browsers:

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

Installation

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="fslightbox.min.js"><script>

NPM

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

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

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

Galleries

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>

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

Images

For images give url or file path into href attribute.

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

Videos

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
</a>

YouTube

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

Instances

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>
<a data-fslightbox="gallery-1" href="exampleImage2.jpg">
<img src="exampleImage2.jpg">
</a>
///////////////////////


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

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

console.log(fsLightbox);

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.

console.log(fsLightboxInstances["gallery-1"]);

If you want to do same thing on every instance you can use e.g. for...in loop.

for (let name in fsLightboxInstances) {
fsLightboxInstances[name].element.addEventListener('init', function(){
console.log('init');
});
}

Important!

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

Options

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

for (let name in fsLightboxInstances) {

// hide certain toolbar buttons
fsLightboxInstances[name].data.toolbarButtons.fullscreen = false;
fsLightboxInstances[name].data.toolbarButtons.close = false;

// hide slide buttons
fsLightboxInstances[name].data.slideButtons = false;

// hide slide counter
fsLightboxInstances[name].data.slideCounter = false;

// distance between slides (x * window.innerWidth)
// default - 1.3
fsLightboxInstances[name].data.slideDistance = 1.3;

}

Methods

// initialize instance on given slide
fsLightbox.init(slideNumber);

// shows a previously initialized instance
fsLightbox.show();

// closes an instance
fsLightbox.hide();

Events

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.

FAQ

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>

I've passed correct url but lightbox displays message: Invalid file!

You've most likely used external url without CORS enabled so lightbox cannot detect it's type. To fix this you can put source you want to display on your server.

Fullscreen Lightbox Javasript
Fullscreen Lightbox React
Get connected wth us on social networks!