Simple And Powerful Fullscreen Lightbox Plugin | fslightbox

Fullscreen Lightbox Basic is a modern and handy plug-in for displaying photos and videos in a clean overlay box. Showcase a single source or create a great gallery with the powerful Lightbox.

More Options:

  • Simple to implement & config.
  • Allows modifying between contents by way of mouse drag and contact swipe.

Must Read – Customizable jQuery Video Lightbox Extension That Allows Playing Youtube / Vimeo Videos

How to make use of it:

1. Install and download the fslightbox.

# Yarn
$ yarn add fslightbox

# NPM
$ npm install fslightbox --save

2. API strategies.

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

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

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

3. 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!');
fsLightboxSituations['lightbox'].props.onShow = () => console.log('Lightbox show!');

4. 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;

// loads only current source
fsLightboxInstances['gallery'].props.loadOnlyCurrentSource = true;

// exists fullscreen on close
fsLightboxInstances['gallery'].props.exitFullscreenOnClose = true;

Browser Compatibility

BrowserWorks?
ChromeYes
FirefoxYes
OperaYes
SafariYes
EdgeYes
IE 11Yes

Modern Fullscreen Lightbox For Images & Videos, lightbox gallery github

Read More – 

Lightbox Gallery Component Written in Vanilla JS | ensemble.Lightbox.js
Mouseover Image Gallery Plugin for Vue.js | VueRollr


See Demo And Download

Official Website(banthagroup): Click Here

This superior jQuery plugin is developed by banthagroup. For extra Advanced Usage, please go to the official website.

Share