Fullscreen Lightbox Javasript
Fullscreen Lightbox React

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 fslightbox-gallery attribute opens a lightbox. Value of href attribute will be shown in your box.

<a fslightbox-gallery href="exampleImage.jpg">
<img src="exampleImage.jpg">
</a>

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

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

Galleries

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

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

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

Images

For images give url or file path into href attribute.

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

Videos

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

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


// this one refers to different instance named "gallery-2"
<a fslightbox-gallery="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. forEach.

fsLightboxInstances.forEach(function (instance) {
instance.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.

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;

});

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

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 scial networks!