Simplest Responsive jQuery Image Lightbox Plugin - simple-lightbox

A minimalist jQuery image lightbox plugin which enables the user to view large, high solution pictures in a responsive, fullscreen, closable modal popup. You can close the image lightbox by pressing the close button or clicking anywhere on the background overlay. 

How to use it:

1. Add jQuery JavaScript library and the jQuery simple-lightbox plugin's script to your webpages.

<script src="//code.jquery.com/jquery.min.js"></script>
<script src="dist/simple-lightbox.min.js"></script>

2. Call the function simpleLightBox() on the img tag and done.

$("img").simpleLightBox();

3. The required CSS to style the image lightbox. Change, override and add the CSS styles as shown below to your html page or include the stylesheet simple-lightbox.min.css directly in the document's head section.

body { position: relative; }

#close-lightbox {
  position: fixed;
  top: 20px;
  right: 20px;
  font-size: 40px;
  color: #FFF;
  cursor: pointer;
}

#lightbox-image {
  position: fixed;
  top: 50%;
  left: 50%;
  margin: 0;
  max-width: 100%;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

#lightbox-image-wrapper {
  width: auto;
  max-width: 100%;
  max-height: 100%;
  margin: 0 auto;
}

#lightbox-wrapper {
  display: none;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  position: fixed;
  top: 0;
  left: 0;
  z-index: 99999;
}

#lightbox-wrapper.active { display: block; }

.smp-lightbox {
  cursor: pointer;
  cursor: -moz-zoom-in;
  cursor: -webkit-zoom-in;
  cursor: zoom-in;
}

---

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