Author: | hjb23 |
---|---|
Views Total: | 675 views |
Official Page: | Go to website |
Last Update: | April 3, 2019 |
License: | MIT |
Preview:

Description:
Lightbox V is a zero-dependency JavaScript image gallery & lightbox plugin that works with single and grouped images.
Features:
- Fully responsive and cross-browser.
- Allows to switch between images in the lightbox.
- Provides an ‘Expand’ icon that expands the image to the full size.
- Infinite loop.
- Supports image captions.
- Easy to implement with data attributes.
How to use it:
Link to the Lightbox V plugin’s JavaScript and Stylesheet.
<link rel="stylesheet" href="dist/css/lightboxV.min.css"> <script src="dist/js/lightboxV.min.js"></script>
Add the required class lightbox-v
to the image(s) and define the image caption in the data-title
attribute.
<a href="large.jpg" data-title="Image Caption" class="lightbox-v"> <img src="thumb.jpg"> </a>
To apply the lightbox plugin to multiple images, make sure the data-lightbox-v
attribute has the same value.
<a href="1.jpg" data-title="Image Caption" data-lightbox-v="gallery" class="lightbox-v"> <img src="1.jpg"> </a> <a href="2.jpg" data-title="Image Caption" data-lightbox-v="gallery" class="lightbox-v"> <img src="2.jpg"> </a> <a href="3.jpg" data-title="Image Caption" data-lightbox-v="gallery" class="lightbox-v"> <img src="3.jpg"> </a> ...
To config the plugin, override the default settings as per your needs.
let lightBoxVOptions = { // max width maxWidth: 900, // shows image count imageCount: true, // fade duration in milliseconds fadeDuration: 10, // shows border border: true, // infinite loop noLoop: true, // shows expand icon expand: true, // shows small arrows arrowsSm: false }
Changelog:
04/13/2019
- Code tweaks.
03/15/2019
- Styles changed.