Image & Gallery Lightbox With Counter And Captions – lumenbox

Preview:

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
});