Responsive jQuery/Html5 Based Gallery Lightbox - mlightbox

File Size: 1.17 MB
Views Total: 9130
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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="//"></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-desc='Image caption 1'
<img src='2.jpg'
     data-desc='Image caption 2'
<img src='3.jpg'
     data-desc='Image caption 3'

3. Style the gallery lightbox in the CSS.

#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_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_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

// close icon

// image captions

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