Simple Image Gallery Lightbox Plugin With jQuery - jzBox

jzBox is a simple, unobtrusive jQuery image viewer plugin that displays a group of images as a lightbox popup gallery. Navigating to the previous/next image can be achieved by clicking buttons below the gallery lightbox or clicking the left/right arrow keys.

How to use it:

1. Load the Font Awesome 4 for navigation arrow icons (Optional).

<link rel="stylesheet" href="font-awesome.min.css">

2. Add a group of thumbnails into your webpage.

<a href="large-1.jpg" class="jzBoxLink" title="Image 1">
  <img src="thumb-1.jpg">
</a>

<a href="large-2.jpg" class="jzBoxLink" title="Image 2">
  <img src="thumb-2.jpg">
</a>

<a href="large-3.jpg" class="jzBoxLink" title="Image 3">
  <img src="thumb-3.jpg">
</a>

3. Build the markup structure for the gallery lightbox.

<div id="jzBox" class="jzBox">
  <div id="jzBoxNextBig"></div>
  <div id="jzBoxPrevBig"></div>
  <img src="#" id="jzBoxTargetImg">
  <div id="jzBoxBottom">
    <div id="jzBoxTitle"></div>
    <span id="jzBoxMoreItems">
      <div id="jzBoxCounter"></div>
      <i class="fa fa-arrow-circle-left fa-2x" id="jzBoxPrev"></i> &nbsp;
      <i class="fa fa-arrow-circle-right fa-2x" id="jzBoxNext"></i> &nbsp;
    </span>
    <i class="fa fa-close fa-2x" id="jzBoxClose"></i>
  </div>
</div>

4. The default CSS styles for the gallery lightbox.

#jzBox {
  top: 0;
  z-index: 10000;
  position: fixed;
  background-color: rgba(30, 30, 30, 0.9);
  margin: 0 !important;
  text-align: center;
  width: 100%;
  height: 100%;
  display: none;
  color: #fff;
}

#jzBoxTargetImg {
  margin: 2% 0 1% 0;
  max-width: 96%;
  max-height: 73%;
  cursor: pointer;
}

#jzBoxCounter {
  margin-bottom: 1%;
  font-size: 12px;
}

#jzBox i:hover {
  cursor: pointer;
  color: #2aabd2;
}

#jzBoxBottom { max-height: 22%; }

#jzBoxNextBig, #jzBoxPrevBig {
  cursor: pointer;
  top: 0;
  left: 0;
  width: 35%;
  position: fixed;
  z-index: 10001;
  height: 100%;
}

#jzBoxNextBig { left: 65%; }

5. Place jQuery library and the jQuery jzBox plugin at the bottom of the webpage.

<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="js/jzBox.js"></script>

Change log:

2016-01-15

• added image load callback

---

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