Minimalist jQuery Image Gallery with Thumbnails

A lightweight jQuery plugin to create a super clean product gallery which allows you to switch between images by clicking on the thumbnails. Supports both vertical or horizontal layouts.

How to use it:

1. Include jQuery library and the jQuery simple image gallery's script in the web page.

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

2. Add your product images and thumbnails into the web page as follows.

<div id="gallery-demo" class="simplegallery">
  <div class="content">
    <img src="images/bigs/1.jpg">
    <img src="images/bigs/2.jpg">
    <img src="images/bigs/3.jpg">
  </div>
  <div class="clear"></div>
  <div class="thumbnail">
    <div class="thumb"> <a href="#" rel="1"> <img src="images/thumbs/1.jpg"> </a> </div>
    <div class="thumb"> <a href="#" rel="2"> <img src="images/thumbs/2.jpg"> </a> </div>
    <div class="thumb"> <a href="#" rel="3"> <img src="images/thumbs/3.jpg"> </a> </div>
  </div>
</div>

3. The sample CSS to style the image gallery. Change the following CSS styles as you wish to meet your specific needs.

.simplegallery {
  margin: 0 auto;
  width: 417px;
  height: 380px;
  overflow: hidden;
}

.simplegallery .content {
  background: #fff;
  position: relative;
  width: 418px;
  height: 270px;
  overflow: hidden;
}

.simplegallery .content img {
  width: 415px;
  border: 1px solid #9c9c9c;
}

.simplegallery .thumbnail { margin-top: 5px; }

.simplegallery .thumbnail .thumb {
  float: left;
  width: 100px;
  height: 100px;
  margin: 0 5px 0 0;
  cursor: pointer;
}

.simplegallery .thumbnail .thumb img {
  border: 1px solid #9c9c9c;
  width: 100px;
}

.simplegallery .thumbnail .last { margin: 0; }

.clear { clear: both; }

4. Initialize the image gallery on document ready.

$(document).ready(function(){

$('#gallery-demo').simplegallery({
  galltime : 400, // transition delay
  gallcontent: '.content',
  gallthumbnail: '.thumbnail',
  gallthumb: '.thumb'
});

});

---

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