Fullscreen Lightbox Javascript Fullscreen Lightbox React

Vanilla Javascript Lightbox Documentation - Basic

Learn how to use Vanilla Javascript Fullscreen Lightbox!

About

Vanilla Javascript Fullscreen Lightbox is library written in pure JavaScript without any additional dependencies. You can display images, videos, whatever you want 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

HTML

Download library .js file from here and add them to your code.

Just before end of body tag:

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

Package manager

Add library via your favourite package manager:

$ npm install --save-dev fslightbox
# or using yarn
$ yarn add --dev fslightbox

Require it in your application .js file:

require('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="https://i.imgur.com/fsyrScY.jpg">
<img src="exampleImage.jpg">
</a>

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

<a data-fslightbox href="/img/example-image.jpg">
John Doe
</a>

Instances

Every unique value of data-fslightbox will be treated as instance. To access specific instance, use it's methods, attach events to it you need to use global fsLightboxInstances object.

<a data-fslightbox="first-lightbox" href="/img/1.jpg">First Lightbox</a>
<a data-fslightbox="second-lightbox" href="/img/2.jpg">Second Lightbox</a>

<script src="fslightbox.min.js"></script>
<script>
fsLightboxInstances['first-lightbox'].open(0);
fsLightboxInstances['second-lightbox'].props.onOpen = () => console.log('Lightbox open!');
</script>

If you have only one instance at page you can access it via global fsLightbox object.

fsLightbox.close();

Refreshing

After adding new <a> tags to detect new lightboxes or update existing ones use global refreshFsLightbox() function.

const a = document.createElement('a');
a.setAttribute('data-fslightbox', 'gallery');
a.setAttribute('href', 'images/2.jpg');
document.body.appendChild(a);

refreshFsLightbox();

Sources

There are 3 types of supported sources: images, videos, YouTube videos. Just pass link to href attribute.

<a data-fslightbox="gallery" href="https://i.imgur.com/fsyrScY.jpg">Image</a>
<a data-fslightbox="gallery" href="https://www.youtube.com/watch?v=xshEZzpS4CQ">YouTube video</a>
<a data-fslightbox="gallery" href="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4">HTML video</a>

Custom sources

To display custom content such as Vimeo videos, Google maps, whatever you want. Lightbox cannot detect default size of such content so to display them you need to use data-width and data-height prop. Instead of passing link to href attribute you need to pass id of custom source with # prefix.

<a data-fslightbox="lightbox" href="#vimeo">Image</a>

<iframe
src="https://player.vimeo.com/video/22439234"
id="vimeo"
frameBorder="0"
allow="autoplay; fullscreen"
allowFullScreen>
</iframe>

There might be a situation in which you don't want to display custom source in website. To achieve that you can use data-custom-class attribute. Class inside of it will be added to source in lightbox:

<a
data-fslightbox="lightbox"
data-custom-class="fslightbox-source"
href="#vimeo">
Image
</a>

<!-- Custom source in website code -->
<iframe
src="https://player.vimeo.com/video/22439234"
id="vimeo"
frameBorder="0"
allow="autoplay; fullscreen"
allowFullScreen>
</iframe>

<!-- Custom source in lightbox -->
<iframe
src="https://player.vimeo.com/video/22439234"
id="vimeo"
class="fslightbox-source"
frameBorder="0"
allow="autoplay; fullscreen"
allowFullScreen>
</iframe>

Types

If you are facing CORS error which blocks automatic content detection you can declare types manually passing it to data-type attribute. Types names are:

  • image type - 'image'
  • video type - 'video'
  • YouTube type - 'youtube'

Events

There are few events that you can listen for:

Prop When fired?
onOpen Every time instance is opened (both show and initialize).
onClose Every time instance is closed.
onInit When instance is opened for the first time.
onShow When opening instance after initial open.

Set up callback function at specific property on props object, e.g.

fsLightboxInstances['lightbox'].props.onInit = () => console.log('Lightbox initialized!');

Methods

At every instance there are two methods available:

// opens lightbox at passed index
fsLightboxInstances['lightbox'].open(0);

// closes lightbox
fsLightboxInstances['lightbox'].close();

Others

Disabling local storage

To improve performance lightbox caches detected types in local storage, if you dont't want that set disableLocalStorage prop to true, it's useful when you are taking sources with different types from same url e.g.

fsLightboxInstances['gallery'].props.disableLocalStorage = true;

Videos posters

To display video poster you can use data-video-poster attribute at video <a> tag.

<a
data-fslightbox="lightbox"
data-video-poster="/img/1.jpg"
href="videos/video.mp4">
Video
</a>

Or array prop with images.

fsLightboxInstances['gallery'].props.videosPosters = ['/img/1.jpg'];

Youtube max dimensions

Lightbox cannot detect dimensions of YouTube videos. To manage that you can use maxYoutubeDimensions prop.

fsLightboxInstances['gallery'].props.maxYoutubeDimensions = { width: 1920, height: 1080 };

Slide distance

Distance between slides (x * window.innerWidth), default - 0.3

fsLightboxInstances['gallery'].props.slideDistance = 0.5;

FAQ

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 automatically.

There are two ways to fix it:

  • you can put source you want to display on your server
  • you can specify source type manually using types prop. More...

Lightbox doesn't detect new sources

Check out refreshFsLightbox function: link.

Get connected wth us on social networks!