Simple Jquery Thumbnail Gallery

Posted on: June 21st, 2010 by James Vec

The above image is what we will be creating. You can click on it to view a demo. It is a simple thumbnail gallery with a fade in fade out effect

If you want to skip the tutorial and just grab the source you can download it here.

All the photos were taken by Chloe Rice. Visit her here

All you need for this tutorial is 12 images, 6 thumbs and 6 full size. They can be any size you want. I used thumbs that were 80×80, and full size images that were 650×400. This is a very simple gallery and should not be used for large amounts of images as all images are loaded with the document.

As always we will need to link the Jquery files and the CSS file in the head.

<link rel="stylesheet" type="text/css" href="css/style.css" media="screen" />
<script src="js/jquery-1.4.2.min.js" type="text/javascript"></script>
<script src="js/simple_thumbs.js" type="text/javascript"></script>

After that we are ready to add the HTML to the body

<div id="wrapper">
  <div id="content">
  <div id="content_left">
  <div class="info_holder">
  <img src="img/title.jpg"  alt="simple gallery" class="title"/>
  <p class="by">Photos by: <span class="name">Chloe Rice</span></p>
  <p class="by">Visit her at <a href="http://ohchloe.com" class="h_link">Oh Chloe dot com</a>
  </p>
  </div>
<ul id="thumb_holder">
  <li><a href="javascript:void(0);"><img src="img/img1_thumb.jpg" alt="motherly" /> </a></li>
    <li><a href="javascript:void(0);"><img src="img/img2_thumb.jpg" alt="xo" /> </a></li>
    <li><a href="javascript:void(0);"><img src="img/img3_thumb.jpg" alt="keep your eyes open" /> </a></li>
    <li><a href="javascript:void(0);"><img src="img/img4_thumb.jpg" alt="bacon bits" /> </a></li>
    <li><a href="javascript:void(0);"><img src="img/img5_thumb.jpg" alt="nature sent packing" /> </a></li>
    <li><a href="javascript:void(0);"><img src="img/img6_thumb.jpg" alt="snow man" /> </a></li>
    </ul>
    </div>
    <div id="large_image_holder">
      <ul id="large_images">
        <li><img src="img/img1.jpg" alt="motherly" /></li>
        <li><img src="img/img2.jpg" alt="xo" /></li>
        <li><img src="img/img3.jpg" alt="keep your eyes open" /></li>
        <li><img src="img/img4.jpg" alt="bacon bits" /></li>
        <li><img src="img/img5.jpg" alt="nature sent packing" /></li>
        <li><img src="img/img6.jpg" alt="snow man" /></li>
      </ul>
    </div>

  </div>
</div>

The gallery markup is really just a couple of lists, one that contains the thumbnails and one that contains the full size images. For the plugin to work you must keep the two list ids the same. Other than that you can change whatever you want. #thumb_holder is the list that holds all the thumbnails and links. #large_images is the list that holds the corresponding full size images.

Next we will add the CSS to our CSS file. It is important to remember that the large images must be stacked for the effect to look good. So #large_image_holder must be relatively positioned so that we can position the main images absolutely within it. Everything else is really up to you. You can style it however you want.


html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {margin: 0;padding: 0;border: 0;outline: 0;font-size: 100%;vertical-align: baseline;background: transparent;}
body {line-height: 1;}
ol, ul {list-style: none;}
blockquote, q {quotes: none;}
blockquote:before, blockquote:after,
q:before, q:after {content: '';content: none;}

:focus {outline: 0;}

ins {text-decoration: none;}
del {text-decoration: line-through;}

table {border-collapse: collapse;border-spacing: 0;}

#wrapper{width:1000px; margin: 0 auto;}
#content{width:1000px; float:left; display:inline; margin:30px 0 0 0;}
#content_left{width:300px; float:left; display:inline;}

#large_image_holder{width:650px; float:left; display:inline; margin: 0 0 0 18px;}
#large_images{width:650px; float:left; display:inline; position:relative; z-index:10; padding:10px;  border:#464646 3px dashed; height:400px;}
#large_images li{position:absolute; z-index:11; left:10;}
#thumb_holder{width:300px;height:213px; float:left; display:inline; border:#464646 3px dashed;}
#thumb_holder li {width:80px; float:left; display:inline; margin:10px;}
.info_holder{width:300px;height:207px; float:left; display:inline;}

.title{float:left; display:inline; width:300px; }
.hide{display:none;}

.by{font-family:'Georgia',Times New Roman,Times,serif; text-transform:lowercase; color:#464646;font-style:italic; font-size:0.8em; line-height:1.1em; margin:0 0 0.5em 0;  }
.name{font-family:'Georgia',Times New Roman,Times,serif; text-transform:lowercase;color:#E62E25;font-style:italic;  }
.h_link{font-family:'Georgia',Times New Roman,Times,serif;color:#E62E25; font-style:italic;}

At this point if you linked my JS file at the top the gallery should already work. I will go over the Jquery block by block and explain what is going on. The effect is very simple to achieve and works on all browsers.

$(document).ready (function(){
	$("#large_images li").each(function(index, element){$(element).attr("class", 'hide');});
    $("#large_images li").each(function(index, element){$(element).attr("id", 'img'+index);});
    $("#thumb_holder li a").each(function(index, element){$(element).attr("rel", 'img'+index);});

The first lines of the script say that when the document is ready, we will add classes ids and rel attributes to certain elements on the page. The first loop loops through all the li objects in #large_images and adds the class hide. This way the large images are all hidden. The second loop adds unique ids to all the li objects. The last loop ads a rel attribute to each link which corresponds to the id of the images.

var mainImg ='img0';
	var current = 'img0';

Next we set some variables. We need to store the rel attribute in one so that we can pull the id of the image and we also need to know which image is the currently selected one so that we don’t apply the effect to it. You will see how these work in a moment.

$('#img0').css('display', 'inline');
	$('#img0').addClass('current');

These lines set the first image to be visible since we hid all of them in the loop. We want one image to be showing.

Below is the click function, where all the wizardry takes place

$('#thumb_holder li a').click (function(){
		mainImg = $(this).attr('rel');
		if(mainImg != current){
		$('.current').fadeOut('slow');
		$('#'+mainImg).fadeIn('slow', function(){
		$(this).addClass('current');
		current = mainImg;

		});
		}
	});
});

If you read through the script you can tell exactly what is going on. #thumb_holder li a, on click mainImg = $(this).attr(‘rel’). So it is grabbing the rel attribute from the a tag which is the same as the id for the image. So next we decide if we should use the effect. The if statement checks to make sure that mainImg is not equal to the current image, because if it is we don’t want anything to happen, because that image is already showing. If it isn’t then we fade out the current image and fade in the mainImg right on top of it. After all that we add the class current to the image that is selected, so we know which is the current image.

It is as simple as that, we now have a pretty neat little thumbnail gallery.

Grab the source you can download it here.

See the demo in action here

Tags: Jquery, Plugin, Simple, Thumbnail Gallery

34 Responses

Sarah

June 29, 2010 at 6:45 pm

You had some good ideas there. I made a search on the issue and noticed most peoples will agree with your blog.

Simple Jquery Thumbnail Gallery

34 Responses

James Vec Reply:

Marcus

James Vec Reply:

Rackham

James Vec Reply:

James Vec Reply:

James Vec Reply:

Erin

jamesvec Reply:

Os

suman

Julie Blair Reply:

jamesvec Reply:

Julie Blair Reply:

Julie Blair Reply:

jamesvec Reply:

JamesVec Reply:

Dudley

daniboombani

Carolina

jamesvec Reply:

Sana

Leave a Reply

Recent Comments

Categories

Archives

Friends

Tags

Friends

iTunes Data

I AM SOCIAL

Latest Tweet

Recent Posts