Author: | stealther23 |
---|---|
Views Total: | 2,444 views |
Official Page: | Go to website |
Last Update: | July 15, 2019 |
License: | MIT |
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 });