Author: | banthagroup |
---|---|
Views Total: | 1,150 views |
Official Page: | Go to website |
Last Update: | February 10, 2023 |
License: | MIT |
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
Thank you, this helped me a lot 🙂