Minimalist jQuery Image Gallery with Thumbnails

File Size: 314 KB
Views Total: 60005
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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="//"></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 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>

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.


  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.