Minimalist jQuery Image Gallery & Lightbox Plugin - jGallery

jGallery is a super simple jQuery gallery plugin which allows you to display grouped images in a responsive lightbox slider.

Basic Usage:

1. Include the jQuery jGallery plugin's files after jQuery JavaScript library.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="scripts/jquerygallery.js"></script>
<link rel="stylesheet" href="styles/jquerygallerystyle.css">

2. Insert a group of thumbnails with links pointing to the sources of large images into your document like this:

<div class="images">
  <a href="large-1.jpg">
    <img class="thumbnail" src="thumb-1.jpg"/>
  </a>
  <a href="large-2.jpg">
    <img class="thumbnail" src="thumb-2.jpg"/>
  </a>
  <a href="large-3.jpg">
    <img class="thumbnail" src="thumb-3.jpg"/>
  </a>
  ...
</div>

3. Create DIV elements for the lightbox.

<div class="backdrop"></div>
<div class="box"></div>

4. Add next/prev navigation and a close button to the lightbox.

<div class="selectors">
  <img class="nextimg" src="sprites/next_arrow.png">
  <img class="previmg" src="sprites/prev_arrow.png">
</div>
<img id="close" src="sprites/close.png">

Change log:

2014-11-06

• Added support for devices under 800px width, removed close button

---

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