Elegant Flexible Image Lightbox Gallery Library – Lightbox V

Category: Gallery , Javascript , Modal & Popup | November 1, 2018
Author: hjb23
Views Total: 247
Official Page: Go to website
Last Update: November 1, 2018
License: MIT

Preview:

Elegant Flexible Image Lightbox Gallery Library – Lightbox V

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

}

You Might Be Interested In:

Leave a Reply