Elegant Flexible Image Lightbox Gallery Library – Lightbox V

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.