Elegant Flexible Image Lightbox Gallery Library – Lightbox V

Category: Gallery , Javascript , Modal & Popup | April 3, 2019
Author:hjb23
Views Total:675 views
Official Page:Go to website
Last Update:April 3, 2019
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
}

Changelog:

04/13/2019

  • Code tweaks.

03/15/2019

  • Styles changed.

You Might Be Interested In:


Leave a Reply