Basic jQuery Photo Gallery With Thumb Navigation - thumbChanger

thumbChanger is a minimalist jQuery photo / product gallery plugin which allows to switch between images by click on the bottom navigation thumbnails.

How to use it:

1. Put the jQuery thumbChange plugin's script after jQuery Javascript but before the closing body tag.

<script src="//code.jquery.com/jquery-1.12.0.min.js"></script>
<script src="jquery.simple.thumbchanger.js"></script>

2. Add your images and thumbnails to the gallery.

<div class="image-area">
  <div class="main-image">
    <div><img src="1.jpg"></div>
    <div><img src="2.jpg"></div>
    <div><img src="3.jpg"></div>
  </div>
  <div class="sub-image">
    <div><img src="thumb-1.jpg"></div>
    <div><img src="thumb-2.jpg"></div>
    <div><img src="thumb-3.jpg"></div>
  </div>
</div>

3. The required CSS styles for the gallery.

.image-area {
  width: 400px;
  margin: 0 auto;
}

.main-image {
  position: relative;
  text-align: center;
  overflow: hidden;
  margin: 0 0 15px 0;
}

.main-image div {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
  -moz-opacity: 0;
  opacity: 0;
  z-index: -1;
}

.sub-image { margin: 0 -15px 0 0; }

.sub-image div {
  float: left;
  margin: 0 15px 0 0;
  cursor: pointer;
  text-align: center;
}

.sub-image img { margin: 0 0 3px 0; }

4. Initialize the gallery plugin.

$('.image-area').thumbchanger();

5. Configuration options available.

$('.image-area').thumbchanger({
  mainImageArea: '.main-image',
  subImageArea:  '.sub-image',
  trigger:       'click',
  easing:        'linear',
  animateTime:   300,
  fixHeight:     true,
  onload: true
});

---

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