Modern Fullscreen Lightbox For Images & Videos – fslightbox

Category: Javascript , Modal & Popup | November 2, 2019
Author: banthagroup
Views Total: 73
Official Page: Go to website
Last Update: November 2, 2019
License: MIT

Preview:

Modern Fullscreen Lightbox For Images & Videos – fslightbox

Description:

fslightbox is an easy, responsive, modern, fullscreen, touch-enabled lightbox for images, galleries, HTML5/Youtube videos, and custom HTML elements.

More features:

  • Simple to implement & config.
  • Allows to switch between contents via mouse drag and touch swipe.

How to use it:

1. Install and download the fslightbox.

# Yarn
$ yarn add fslightbox

# NPM
$ npm install fslightbox --save

2. Load the main JavaScript file from the dist folder.

<script src="dist/fslightbox.js">

3. Insert image & video links into <a> tags as follows. To create a gallery lightbox, make sure the links have the same ‘data-fslightbox’ attribute:

<a data-fslightbox="gallery" href="1.jpg">
   An Image
</a>

<a data-fslightbox="gallery"
   data-video-poster="poster.jpg"
   href="1.mp4">
   An HTML5 Video
</a>

<a data-fslightbox="gallery"
   href="https://www.youtube.com/watch?v=yRbM2NIpZHY">
   A Youtube Video
</a>

4. You can also load content from the inline elements.

<a data-fslightbox="gallery" 
   data-width="500" 
   data-height="400" 
   data-custom-class="fslightbox-custom"
   href="#custom-source">
   Custom Content
</a>

div id="custom-source"
    style="display: none">
    Custom content here
</div>

5. Sometimes you might need to specify the data type for each link:

<a data-fslightbox="gallery"
   data-type="image"
   href="1.jpg">
   An Image
</a>

<a data-fslightbox="gallery"
   data-type="video"
   data-video-poster="poster.jpg"
   href="1.mp4">
   An HTML5 Video
</a>

<a data-fslightbox="gallery"
   data-type="youtube"
   href="https://www.youtube.com/watch?v=yRbM2NIpZHY">
   A Youtube Video
</a>

6. API methods.

// opens content 2
fsLightboxInstances['lightbox'].open(1);

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

// refreshes the lightbox when new content is added
refreshFsLightbox();

7. Event handlers.

fsLightboxInstances['lightbox'].props.onOpen = () => console.log('Lightbox open!');
fsLightboxInstances['lightbox'].props.onClose = () => console.log('Lightbox close!');
fsLightboxInstances['lightbox'].props.onInit = () => console.log('Lightbox init!');
fsLightboxInstances['lightbox'].props.onShow = () => console.log('Lightbox show!');

8. More props to config the lightbox.

// disables the local storage
fsLightboxInstances['gallery'].props.disableLocalStorage = true;

// sets the video poster
fsLightboxInstances['gallery'].props.videosPosters = ['1.jpg'];

// sets the max width/height of the Youtube video
fsLightboxInstances['gallery'].props.maxYoutubeDimensions = { width: 1920, height: 1080 };

// sets the space between slides
fsLightboxInstances['gallery'].props.slideDistance = 0.5;

Changelog:

v3.0.5 (11/02/2019)

  • Added lazy loading

You Might Be Interested In:


Leave a Reply