Modern Fullscreen Lightbox For Images & Videos – fslightbox

Category: Javascript , Modal & Popup | August 15, 2020
Author:banthagroup
Views Total:425 views
Official Page:Go to website
Last Update:August 15, 2020
License:MIT

Preview:

Modern Fullscreen Lightbox For Images & Videos – fslightbox

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

You Might Be Interested In:


Leave a Reply