Modern Fullscreen Lightbox For Images & Videos – fslightbox

Preview:

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" 
   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.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