Image & Gallery Lightbox With Counter And Captions – lumenbox

Category: Javascript , Modal & Popup | July 15, 2019
Author:stealther23
Views Total:2,444 views
Official Page:Go to website
Last Update:July 15, 2019
License:MIT

Preview:

Image & Gallery Lightbox With Counter And Captions – lumenbox

Description:

lumenbox is a pure JavaScript lightbox plugin which displays a single image or a group of images in a responsive popup.

Features:

  • Current/Total counter.
  • Keyboard and arrow navigation.
  • Fade in/out transitions.
  • Infinite loop.

How to use it:

Download and load the minified version of the lumenbox plugin from the dist folder.

<link rel="stylesheet" href="dist/css/lumenbox.min.css" />
<script src="dist/js/lumenbox.min.js"></script>

Initialize the lumenbox plugin and we’re ready to go.

var Lumenbox = new Lumenbox({
    // options here
});

Apply the data-lumenbox attribute to your images.

<a class="example-image-link"
   href="https://source.unsplash.com/mBJMKLBpZ98/600x450"
   data-lumenbox="example-1">
   <img class="example-image" src="https://source.unsplash.com/mBJMKLBpZ98/200x150" alt="image-1" />
</a>

Define the image description in the data-title attribute.

<a class="example-image-link"
   href="https://source.unsplash.com/mBJMKLBpZ98/600x450"
   data-title="Some title here"
   data-lumenbox="example-1">
   <img class="example-image" src="https://source.unsplash.com/mBJMKLBpZ98/200x150" alt="image-1" />
</a>

To create a gallery lightbox, just make the data-lumenbox attribute have the same value.

<a class="example-image-link"
   href="https://source.unsplash.com/mBJMKLBpZ98/600x450"
   title="Regular title attribute"
   data-lumenbox="my-gallery">
   <img class="example-image" src="https://source.unsplash.com/mBJMKLBpZ98/200x150" alt="image-1" />
</a>
<a class="example-image-link"
   href="https://source.unsplash.com/lfu6BxzoKOY/600x450"
   data-title="data-title attribute"
   data-lumenbox="my-gallery">
   <img class="example-image" src="https://source.unsplash.com/lfu6BxzoKOY/300x150" alt="image-2" />
</a>
<a class="example-image-link"
   href="https://source.unsplash.com/_VJ4mRqz1eI/600x450"
   data-title="This is some long long long long long long long long long caption right here! cheers!"
   data-lumenbox="my-gallery">
   <img class="example-image" src="https://source.unsplash.com/_VJ4mRqz1eI/200x150" alt="image-3" />
</a>

Possible options to customize the lightbox.

var Lumenbox = new Lumenbox({
    countLabel: '%current of %total',
    fitInViewport: true,
    showCounter: false,
    infiniteNavigation: false, // infinite loop
    enableKeyboardNavigation: false,
    transitionDuration: 500, // in milliseconds
    backDropClose: true, // close the lightbox by clicking the background overlay
});

You Might Be Interested In:


Leave a Reply