Minimalist jQuery Image Gallery with Thumbnails
File Size: | 314 KB |
---|---|
Views Total: | 59654 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

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.