Easy Responsive Photo Gallery Plugin with jQuery

A lightweight and easy-to use jQuery plugin to display the photo gallery in a responsive lightbox with arrows/thumbnails navigation.

How to use it:

1. Include jQuery JavaScript library and the jQuery gallery plugin into your document.

<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="jQuery-gallery/jquery-gallery.js"></script>

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

2. Include Font Awesome 4 icon font for navigation icons (Optional).

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">

3. Insert your images into the document following the markup structure as shown below. Use data-gallery attribute to group the images so that you can display multiple galleries on your webpage.

<div class="coverimg">
  <a href="#"><img src="1.jpg" data-gallery="my-gallery"></a>
  <a href="#"><img src="2.jpg" data-gallery="my-gallery"></a>
  <a href="#"><img src="3.jpg" data-gallery="my-gallery"></a>
  <a href="#"><img src="4.jpg" data-gallery="my-gallery"></a>
  <a href="#"><img src="5.jpg" data-gallery="my-gallery"></a>
</div>

4. Initialize the gallery plugin with default options.

$(document).jquerygallery();

5. Available options to customize the gallery.

$(document).jquerygallery({

// displays a thumbnails navigation
'coverImgOverlay' : true,

// CSS classes
'imgActive' : "imgActive",
'thumbnail' : "coverImgOverlay",
'overlay' : "overlay",

// the height of the thumbnails
'thumbnailHeight' : 120,

// custom navigation controls. 
// requires Font Awesome
'imgNext' : "<i class='fa fa-angle-right'></i>",
'imgPrev' : "<i class='fa fa-angle-left'></i>",
'imgClose' : "<i class='fa fa-times'></i>",

// animation speed
'speed' : 300

});

---

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