Responsive jQuery Image Gallery with Thumbnails Navigation

A simple and fast jQuery plugin for presenting your images in a responsive, fullscreen, lightbox-style gallery UI with carousel thumbnails navigation.

How to use it:

1. Load the gallery.css in the document's head section.

<link rel="stylesheet" href="css/gallery.css">

2. Add thumbnails of large images to the gallery.

<div id="gallery">
  <ul>
    <li><a href="large-1.jpg"><img src="thumb-1" alt=""></a></li>
    <li><a href="large-2.jpg"><img src="thumb-2" alt=""></a></li>
    <li><a href="large-3.jpg"><img src="thumb-3" alt=""></a></li>
    <li><a href="large-4.jpg"><img src="thumb-4" alt=""></a></li>
    <li><a href="large-5.jpg"><img src="thumb-5" alt=""></a></li>
    <li><a href="large-6.jpg"><img src="thumb-6" alt=""></a></li>
    ...
  </ul>
</div>

3. Load jQuery library and the jQuery gallery.js at the bottom of the document.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="js/gallery.js"></script>

4. Done. Click on any image will display a fullscreen gallery that you can navigate between large images by arrows & thumbnails navigation.

---

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