Responsive Full Page Gallery Lightbox Plugin For jQuery - lighterbox

Lighterbox is a tiny (~4kb minified) jQuery gallery lightbox plugin which allows you to display large images with captions in a responsive fullpage lightbox.

How to use it:

1. Add the necessary jQuery library and the jQuery lighterbox plugin in your Html page.

<script src="ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="js/jquery.lighterbox.0.0.2.min.js"></script>

2. Create a gallery of images in your web page.

<div class="gallery-demo">

  <div class="gallery-img">
    <a href="large1.jpg" class="lighterbox">
      <img src="1.jpg">
      <h2 class="lighterbox-title">Title 1</h2>
      <span class="lighterbox-desc">Description 1</span> 
    </a> 
  </div>

  <div class="gallery-img">
    <a href="large2.jpg" class="lighterbox">
      <img src="2.jpg">
      <h2 class="lighterbox-title">Title 2</h2>
      <span class="lighterbox-desc">Description 2</span> 
    </a> 
  </div>

  <div class="gallery-img">
    <a href="large3.jpg" class="lighterbox">
      <img src="3.jpg">
      <h2 class="lighterbox-title">Title 3</h2>
      <span class="lighterbox-desc">Description 3</span> 
    </a> 
  </div>

</div>

3. The sample CSS to style the gallery.

.gallery-demo {
  max-width: 610px;
  margin: 0.5em auto;
}

.gallery-img {
  max-width: 49%;
  float: left;
  margin-right: 0.5%;
  text-align: center;
}

img {
  max-width: 100%;
  height: auto;
}

a {
  color: black;
  text-decoration: none;
}

a:hover img { opacity: 0.7; }

a h2,
a span {

@media (max-width: 500px) {
h1 { font-size: 1.5em; }

.gallery-img {
  max-width: 100%;
  float: none;
}
}

4. Call the plugin on the parent element to initialize the gallery.

$(".lighterbox").lighterbox();

5. Available options to customize the gallery lightbox.

"overlayColor" : "white",
"overlayOpacity" : "0.95",
"animateSpeed" : 200,
"baseCss": {
  "width" : "auto",
  "height" : "auto",
  "max-width" : "100%",
  "max-height" : "100%",
  "position" : "fixed",
  "top" : "50%",
  "right" : "50%",
  "z-index" : "9998",
  "opacity" : "0"
},
"loaderCss" : {
  "width" : "30px",
  "height" : "30px",
  "position" : "fixed",
  "left" : "50%",
  "bottom" : "50%",
  "margin-left" : "-15px",
  "z-index": "9997",
  "background": "url('loader.gif') no-repeat",
  "background-size": "30px"
},
"closeCss" : {
  "font-size" : "2em",
  "color" : "#000",
  "position" : "fixed",
  "top" : "0.5em",
  "right" : "0.5em",
  "z-index" : "9999",
  "opacity" : "0"
},
"captionCss" : {
  "width" : "100%",
  "text-align": "center",
  "background" : "#000",
  "color" : "#fff",
  "position" : "fixed",
  "bottom" : "0",
  "left" : "0",
  "z-index" : "9999",
  "opacity" : "0"
}

---

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