Simple And Powerful Fullscreen Lightbox Plugin

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.

Browsers

Fullscreen Lightbox was successfully tested on the following browsers:

Google Chrome
Mozilla Firefox
Safari
Microsoft Edge
Internet Explorer 11
Opera

Must Read: Responsive Image Gallery & Lightbox Plugin using Bootstrap

Fullscreen Lightbox Plugin Details

Post Name	Fullscreen Lightbox Plugin
Author Name	banthagroup
Category	Gallery Plugins, Lightbox
Official Page	Click Here
Official Website	github.com
Publish Date	August 15, 2020
Last Update	July 15, 2023
Download	Link Below
License	MIT

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.

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;

Toolbar

Custom buttons can be added to the toolbar using the “customToolbarButtons” array property. Required properties for each button:

viewBox – A required property of the button’s SVG code
d — Required property of the SVG symbol
Width — A required property of the SVG symbol
Height — A required property of the SVG symbol
Title — the text to display on the hover-over the button
onClick – The action to be called after a click using the Lightbox instance as an argument

Events

The events you can listen to:

Must Read: A simple Pure CSS Image Gallery lightbox | CSSBox

Prop	When is it fired?
onOpen	On every open of the lightbox.
onClose	On every close of the lightbox.
onInit	On the initial opening of the lightbox.
onShow	On every open of the lightbox excluding the initial open.
onSlideChangePRO	On every slide change the lightbox.