Basic jQuery Photo Gallery With Thumb Navigation - thumbChanger
File Size: | 3.59 KB |
---|---|
Views Total: | 6887 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

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.