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.


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 NameFullscreen Lightbox Plugin
Author Namebanthagroup
CategoryGallery Plugins, Lightbox
Official PageClick Here
Publish DateAugust 15, 2020
Last UpdateJuly 15, 2023
DownloadLink Below

How to make use of it:

1. Install and download the fslightbox.

# Yarn
$ yarn add fslightbox

$ npm install fslightbox --save

2. API strategies.

// opens content 2

// closes the lightbox

// refreshes the lightbox when new content is added

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;


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


The events you can listen to:

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

PropWhen is it fired?
onOpenOn every open of the lightbox.
onCloseOn every close of the lightbox.
onInitOn the initial opening of the lightbox.
onShowOn every open of the lightbox excluding the initial open.
onSlideChangePROOn every slide change the lightbox.

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.

Related Posts


CSS Layout Components Horizontal/Vertical Stack | HStack and VStack

HStack and VStack in CSS – CSS layout components that (basically) stack anything horizontally and vertically. A pure CSS library that makes it easy to stack elements…


How to Add Floating Whatsapp Chat Button In HTML | venom-button

Venom Button is a very simple plugin for the jQuery floating WhatsApp button. Adds a floating button to your site that calls WhatsApp Click to Chat API. It will automatically start the WhatsApp…


Interactive Data Table Generator with JS/jQuery and JSON | Tabulator

Tabulator allows you to create interactive tables in seconds from any HTML Table, JavaScript array, AJAX data source, or JSON format data. Just include the library in your…


Simple Alert, Confirm, Prompt Popup Using Vanilla JavaScript Library | attention.js

JavaScript provides various built-in functionality to display popup messages for different purposes. Attention JS is a vanillaJS plugin used to create a custom alert, confirm, or Prompt…


Bootstrap 4 Sidebar Menu Responsive Template | MDB

Bootstrap Side Navbar – Responsive sidebar template based on the Bootstrap 4 framework. An easy-to-use, totally responsive, Google Material Design impressed aspect navigation for modern web app…


Lightweight Bootstrap 4 Toast Notification Plugin | BS4 Advanced Toast

A lightweight Bootstrap 4 Toast Notification plugin integrated with JS/jQuery. bs4-toast.js is a JavaScript library that enhances the native Bootstrap toast component with icons, buttons, callbacks, and…

Leave a Reply

Your email address will not be published. Required fields are marked *