Modern Fullscreen Lightbox For Images & Videos – fslightbox

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.

<script src="index.js"></script>

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" 
   data-caption="<h1>Example title</h1>"
   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"
   data-thumb="thumbnail.jpg"
   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"
   data-thumb="thumbnail.jpg"
   href="https://www.youtube.com/watch?v=yRbM2NIpZHY">
   A Youtube Video
</a>

6. Add custom HTML attributes using the data-attr attribute:

<a data-fslightbox="gallery" data-alt="Image Alt" href="img.jpg">
  Image
</a>

7. API methods.

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

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

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

8. 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!');

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

Changelog:

v3.6.0 (05/14/2025)

• Make the container focused on open, and further improve responsiveness.

v3.5.0 (02/17/2025)

• Update

v3.4.2 (02/10/2023)

• Update

v3.4.1 (02/10/2023)

• Update

v3.3.3 (01/27/2023)

• Update

v3.3 (06/24/2020)

• Lightbox is now agnostic to hardware pointer type.
• disableLocalStorage disables now all local storage operations.
• Fixed issue with background scrolling during swiping on mobile Safari.
• Set enablejsapi parameter to 1 for YouTube sources.

v3.2.23 (12/26/2020)

• Updated

v3.2.2 (10/24/2020)

• Updated

v3.2.0 (08/15/2020)

• Custom sources attributes – add attributes with data- prefix to the tags and attach anything you want to the sources.
• Fixed fullscreen button issue on mobile – you had to tap two times to exit fullscreen.
• By default lightbox does not exit fullscreen on close.
• Added exitFullscreenOnClose boolean prop. Set it to true and lightbox will exit fullscreen on close.
• Fixed issue with youtube video in fullscreen being covered by lightbox.
• Removed will-change css property from lightbox.

v3.1.0 (01/25/2020)

• Added option to load only current slide on lightbox open.
• Fixed issue with freezing lightbox on double right click.
• Slide number is now not going beyond page when numbers are too large.

v3.0.9 (12/14/2019)

• Update

v3.0.8 (11/16/2019)

• Update

v3.0.5 (11/02/2019)

• Added lazy loading

The post Modern Fullscreen Lightbox For Images & Videos – fslightbox appeared first on CSS Script.