Fullscreen Lightbox Javasript
Fullscreen Lightbox React

Fullscreen Lightbox Documentation - 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 18
  • 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.

Fullscreen Lightbox Documentation - 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 18
  • 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>

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

Videos

For images give url or file path into href attribute.

<a fslightbox-gallery="example-video" 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.

<a fslightbox-gallery="example-image" 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');
});
});

Creating instance manually

There is possibility to create gallery manually. You need just to create new instance of fsLightboxClass, add a name and array with urls.

const gallery = new fsLightboxClass();

// name of instance, like in fslightbox-gallery attribute
gallery.data.name = "gallery-created-manually";

gallery.data.urls = [
"image1.jpg",
"film2.mp4",
"https://www.youtube.com/watch?v=p7ZsBPK656s",
];

// opens box for the first time. More about methods.
gallery.init();

Important!

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

Toolbar

In pro version there are more toolbar buttons available. They will appear in order you give in array with buttons names. If you don't want some of them just simply don't add them to array. By default there are all added.

fsLightbox.data.buttons = [

// downloads source if not from YouTube. Download start via JS don't work in IE!
"download",

// toggles thumbnails
"thumbnails",

// toggles slideshow
"slideshow",

"zoom-in",
"zoom-out",

// toggles fullscreen mode
"fullscreen",

// closes box
"close",

];

You can change size of toolbar icons by changing toolbarIconsSize property from data.

// unit is em, default value is 1
fsLightbox.data.toolbarIconsSize = 1.2

Too big toolbar

There might be a situation that toolbar will not fit in smaller screens. The solution for that is to hide certain buttons on mobiles. To do it you need to add to buttonsWithClass array button names that you want to hide. And then set buttonsClass property to class name that you want to add.

// to buttons that names are in this array will be added class
// in this example we will add it to fullscreen button
fsLightbox.data.buttonsWithClass = [
"fullscreen",
];

// name of the class being added
fsLightbox.data.buttonsClass = "hide-mobile";

And now you can freely edit that class in CSS e.g.

@media (max-width: 479px) {
.hide-mobile {
display: none;
}
}

Adding custom toolbar buttons

You can easily add your own buttons to toolbar by creating new toolbarButton on gallery instance you want and adding it's name to buttons array.

Fullscreen lightbox uses svg icons and doesn't support different ones.

Some websites with svg icons:
http://svgicons.sparkk.fr/
https://icons8.com/
https://www.flaticon.com/

Example of creating Facebook button.

new fsLightbox.toolbarButton({

// REQUIRED --------------

// name of the button
"name": "fb",

// viewBox of svg icon
"viewBox": '0 0 20 20',

// path data of svg icon
"d": "M11.344,5.71c0-0.73,0.074-1.122,1.199-1.122h1.502V1.871h-2.404c-2.886,0-3.903,1.36-3.903,3.646v1.765h-1.8V10h1.8v8.128h3.601V10h2.403l0.32-2.718h-2.724L11.344,5.71z",

// width of icon
"width": "1.10em",

// height of icon
"height": "1.10em",

// function called on clicking button
"onclick": function () {
console.log('Facebook button clicked');
},


// OPTIONAL --------------

// array with classes that you want to add
"classes": ["additional-facebook-class"],

// id of button if you want
"id": "facebook-button-id",

});


// Now add button name to buttons array on place you want.

fsLightbox.data.buttons = [
"fb",
"download",
"thumbnails",
"slideshow",
"zoom-in",
"zoom-out",
"fullscreen",
"close",
]

If you want you can store new toolbarButton in variable and access it's element property, which is DOM object of button.

let customButton = new fsLightbox.button({
// your button
});

customButton.element. // whatever you want

Thumbnails

Thumbnails are enabled by default. Images and YouTube videos thumbnails are created automatically. If you want to have normal video thumbnail you need to add video poster (if you don't want there is default thumbnail anyway).

When thumbnails are opened captions are hidden.

There are two buttons that toggles thumbnails, one at toolbar one at bottom right corner.

Fullscreen Lightbox Description

Thumbnails options

There are a few thumbnails options you can change on instance data property.

fsLightboxInstances.forEach( function(gallery) {

// if false completly disables thumbnails (default - true)
gallery.data.thumbnails = false;

// if false hides thumbnails button at bottom right corner (default - true)
gallery.data.showDefaultThumbnailButton = false;

// shows thumbnails when box is initialized (default - true)
gallery.data.showThumbnailsOnInit = false;

// color of active slide thumbnail border (default - "#b9bbbe")
gallery.data.thumbnailHighlightColor = "#b9bbbe";

// distance between thumbnails in pixels (default - 10)
gallery.data.thumbnailsDistance = 10;

});

Captions

In pro version you can add captions to your slides. You can do it by adding special attributes to <a> tags.

By adding fslightbox-caption-title attribute value you can add title. And by adding fslightbox-caption-description description. There is no need to give both of them.

<a fslightbox-gallery="random-gallery" fslightbox-caption-title="Random title" fslightbox-caption-description="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ultrices urna pharetra tortor pretium blandit. Duis gravida tempor metus, eget auctor orci ultrices a." href="exampleImage.jpg">
There is a caption!
</a>
Fullscreen Lightbox Caption

You can enter HTML code into attributes if you want.

<a fslightbox-gallery="random-gallery" fslightbox-caption-title='<a href="#">Link</a>' href="exampleImage.jpg">
There is a caption!
</a>

Creating captions manually

You need to add objects with titles and descriptions properties to captions array on instance data property.

fsLightbox.data.captions = [
{
"title": "You created caption manually!",
"description": "<a href='#'>Boi</a>",
}
];


// it's an array! index 0 refers to slide 1 etc.
fsLightbox.data.captions[0] = {
"title": "This creates caption too!",
"description": "<a href='#'>Boi</a>",
}

Animations

This is list of available animations. Choose your favourite one!

  • "fade-in" (default)
  • "slide-corner"
  • "rotate"
  • "zoom-in"
  • "pop-in"

To edit animation change value of animation property on your instance data property. And to edit time - animationDuration.

fsLightbox.data.animation = "slide-corner";

// unit is millisecond (default - 300)
fsLightbox.data.animationDuration = 300;

You can create your own animation if you want. Just create CSS keyframe named fslightbox-[name of your animation].

@keyframes fslightbox-random-animation {

0% {
/** it's just **/
}

100% {
/** an example **/
}

}

Remember to change value of animation property. In this case to:

fsLightbox.data.animation = "random-animation";

Options

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

fsLightboxInstances.forEach(function (instance) {

// time in milliseconds that must pass to change slide when slideshow is turned on (default - 5000)
instance.data.slideShowTimeout = 5000;
// slide show bar color (default - "#fff")
instance.data.slideShowBarColor = "#fff";

// by default UI is hiding after a few seconds if user didn't perform any action, you can disable it by changing hidingUI to false (default - true)
instance.data.hidingUI = false;
// time in milliseconds that must pass to hide UI (default - 12000)
instance.data.timeToHideUI = 12000;

// youtube video aspect ratio - width to height (default 1.7)
instance.data.youtubeVideoAspectRatio = 1.7;

// 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 (on first if parameter not given)
fsLightbox.init(slideNumber);

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

// closes an instance
fsLightbox.close();

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.
slidechange On slide change.

FAQ

Opening and closing cause fixed elements to jump.

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

I've created custom button but it doesn't appear.

Check if you have added it's name to buttons array.

fsLightbox.data.buttons = [
"your button name",
"download",
"thumbnails",
"slideshow",
"zoom-in",
"zoom-out",
"fullscreen",
"close",
];

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!