Responsive jQuery/Html5 Based Gallery Lightbox - mlightbox

mlightbox is a jQuery image lightbox plugin which displays a gallery of images grouped with Html5 data-gallery attribute in a responsive lightbox.

How to use it:

1. Import jQuery library and the jQuery mlightbox plugin's files into your document.

<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="mlightbox.js"></script>

2. Create the Html to display all the images wrapped with the same Html5 data-gallery attribute in a lightbox as you click on any of them.

<img src='1.jpg'
     data-image='1.jpg' 
     data-gallery='gallery1' 
     data-desc='Image caption 1'
>
<img src='2.jpg'
     data-image='2.jpg' 
     data-gallery='gallery1' 
     data-desc='Image caption 2'
>
<img src='3.jpg'
     data-image='3.jpg' 
     data-gallery='gallery1' 
     data-desc='Image caption 3'
>

3. Style the gallery lightbox in the CSS.

#lgbx,
#lgbx_bcg { position: fixed }

#lgbx_bcg {
  top: 0;
  left: 0;
  z-index: 50;
  width: 100%;
  height: 100%;
  cursor: pointer;
  background: rgba(0,0,0,0.8)
}

#lgbx {
  background: #FFF;
  padding: 5px;
  z-index: 55;
  top: 0;
  left: 0
}

#lgbx_close,
#lgbx_desc,
#lgbx_next,
#lgbx_prev {
  position: absolute;
  z-index: 56;
  display: none
}

#lgbx_close {
  z-index: 56;
  right: 9px;
  top: 9px;
  cursor: pointer;
  width: 15px
}

#lgbx_desc {
  bottom: 0;
  right: 0;
  background: rgba(0,0,0,0.6);
  color: #FFF;
  padding: 5px 8px 1px;
  font-size: 12px
}

#lgbx_next,
#lgbx_prev {
  cursor: pointer;
  top: 50%;
  margin-top: -20px;
  height: 40px
}

#lgbx_next { right: 5px }

#lgbx_prev { left: 5px }

4. That's it. You can override the default global variables at the beginning of the mlightbox.js.

// navigation arrows
darrows:true,

// close icon
dclose:true,

// image captions
ddesc:true,

---

This awesome jQuery plugin is developed by miskith. For more Advanced Usages, please check the demo page or visit the official website.