Fullscreen Lightbox Style Gallery Plugin For jQuery - jBox

jBox is a simple and easy-to-use jQuery image viewer plugin which allows the users to view full size versions of thumbnails in a responsive, touch-enabled, navigatable lightbox popup gallery.

How to use it:

1. Put the required Font Awesome 4 icon font and jQuery jBox plugin's CSS in the head section of your webpage.

<link rel="stylesheet" href="/path/to/font-awesome.min.css">
<link rel="stylesheet" href="/path/to/jBox.css">

2. Add a group of images into a container.

<div class="container">

  <img class="jbox-img" src="1.jpg">
  <img class="jbox-img" src="2.jpg">
  <img class="jbox-img" src="3.jpg">
  <img class="jbox-img" src="4.jpg">
  <img class="jbox-img" src="5.jpg">
  ...

</div>

3. The basic html structure for the image viewer.

<div class="jbox-container">
  <div class="img-alt-text"></div>
  <img src="" />
  <i id="prev" class="fa fa-angle-left"></i>
  <i id="next" class="fa fa-angle-right"></i>
  <i id="close" class="fa fa-times"></i>
</div>

4. Put jQuery library and the jQuery jBox plugin's script at the bottom of the webpage.

<script src="//code.jquery.com/jquery-2.2.0.min.js"></script>
<script src="js/jBox.min.js"></script>

5. Include the jQuery touchSwipe plugin after jQuery library to make the image viewer mobile-friendly.

<script src="/path/to/jquery.touchSwipe.min.js"></script>

Change log:

2016-01-18

• JS update

---

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