Creating a simple jQuery Gallery

Creating a simple jQuery Gallery

Thinking it through

I can’t claim anything new with this, but I would like to show you how to use jQuery to build a very simple image gallery. This one really hit home on how important it is to think your way through what you want jQuery to do BEFORE you start writing the code. You will find that you get into trouble if you don’t.

Click here to see the demo.

Binary Solo!

Ten points if you can comment and tell me what HBO show that heading is from. Anyway, on to the code! I will leave out the css because it is really irrelevant. You can style your gallery however you want. This is just for demo purposes.


Here is the HTML:

<div id="simple">
<a href="images/green_L.jpg"><img src="images/green_S.jpg" width="100" height="100" alt="Green"></a>
<a href="images/purple_L.jpg"><img src="images/purple_S.jpg" width="100" height="100" alt="Purple"></a>
<a href="images/blue_L.jpg"><img src="images/blue_S.jpg" width="100" height="100" alt="Blue"></a>
</div>

As you can see, each ‘a’ tag is wrapped around an image. The image tag’s source is the thumbnail, while the href of the ‘a’ tag is the src of the large photo. If you look at the demo link above, you will see what it is supposed to do. Click on the thumbnails and you will see the Large image swap out for the matching thumbnail image.

Now here is the first part of the jQuery code, I’ll do it in 3 sections:

$('#simple a').click(function(evt) {
		 evt.preventDefault();
	     var imgPath = $(this).attr('href');
		 var oldImage = $('#photo img');
		 if (imgPath == oldImage.attr('src')) { 
		 	return;
		 } else {
       $('.selected').removeClass('selected');		
			 $(this).addClass('selected');

Starting with line 1 -

  1. Get all the ‘a’ tags with in the div that has an id of ‘simple’
  2. Prevent the default action of the ‘a’ tag – if you don’t do this, it just loads a page with just the large image
  3. Create variable that is equal to the href of the ‘a’ tag
  4. Create a variable equal to the image in the div with an id of #photo (gets the large img)
  5. If the ‘a’ tag’s href is equal to the large image source don’t do anything – means you just clicked the thumbnail that matches the large image
  6. Otherwise do this (the else line)
  7. Find the ‘a’ tag with the class selected on it, remove the class
  8. And add it to the one the user clicked (‘selected’ class gets placed on the ‘a’ tag clicked)

So far so good? On to the next chunk:

 var newImage = $('<img src="' + imgPath +'">');
			 newImage.hide();
			 $('#photo').prepend(newImage);
			 oldImage.fadeOut(1000,function(){
		     $(this).remove();
				});
 
			 newImage.fadeIn(1000);
		 }
	});
  1. Create a new image set to a variable, where it’s source is equal to the href of the ‘a’ tag clicked
  2. Hide this new image
  3. Prepend the new image to the div with an id of ‘photo’ (meaning you created html that is an image tag with a source attribute, and you are now placing it as the first child of ‘photo’).
  4. Fade out the old image, and when it is done, use a call back function to remove it – so the large image that was showing fades, then gets removed from the DOM
  5. Fade in the new image you created

And finally:

$('#simple a:eq(0)').click();

This last line is basically saying “Let’s pretend that the 1st ‘a’ tag has already been clicked, which is why you see the large green image. If you didn’t have that line, there would be no large image showing when the document loaded.

And there you have it!

Now of course you can add all sorts of crap to make it even more flashy, but then…it wouldn’t be a “simple” gallery, now would it. If you have any questions, let me know!

Coupon Code: webmachine

Tags: ,

7 Responses to “Creating a simple jQuery Gallery”

  1. Perfectly simple! Good stuff!

    Just wondering, why did you have to return if imgPath equals oldImage.attr(‘src’)? Could you not just do

    if (imgPath !== oldImage.attr(‘src’) and then execute the rest of the code that’s currently in the else statement?

  2. jcDesigns says:

    Indeed, that works too! I wrote the if and then went straight to the else. Didn’t think of eliminating the else out of that. Thanks!

    • No problem! I’ve never seen preventDefault before. It looks extremely useful. In this context, tt eliminates the need to use a span tag styled like a link for click events. Extremely clever.

      • jcDesigns says:

        Actually now that I’ve thought about it, return false; might have been better because it stops event propogation (bubbling up to the parents of the element). There is a really good article at:

        http://css-tricks.com/return-false-and-prevent-default/

        It tells the difference between the two. I found the last comment on that post to be interesting, too.

  3. Mark says:

    High resolution fotos gallery – jQuery ajax-zoom – http://www.ajax-zoom.com

  4. Allen says:

    I just stumbled upon your post…. I can’t believe that nobody answered the question about ‘Binary Solo’… Flight of the Conchords, “The Humans are Dead”.

    Binary Solo!
    0000001, 00000011
    000000111, 00001111
    0000001, 00000011
    000000111, 00001111

    Come on sucker, lick my battery

Leave a Reply