Simple jQuery Gallery

16 July 2009| 18 Comments| Print

Recently I was asked to code a really simple photo gallery with jQuery, so I thought I’d post it for all to use. Its really simple and is the first time I’ve built a gallery with jQuery. It works by taking the link to the large image from the rel tag that we set in our html code. we then replace the contents of the div with the id of #image. The hide() and fadeIn() functions are optional. Check out the demo below and as usual you can download the complete code!

gallery

 $(function() {
$(".image").click(function() {
var image = $(this).attr("rel");
$('#image').hide();
$('#image').fadeIn('slow');
$('#image').html('<img src="' + image + '"/>');
return false;
	});
});

Below is the HTML. note that we use the rel attribute which holds the link to the full sized image. We take that attribute and get the value using JavaScript.

<div id="image"><img src="images/1.png" border="0"/></div>
<a href="#" rel="images/1.png" class="image"><img src="images/t1.png" class="thumb" border="0"/></a>
<a href="#" rel="images/2.png" class="image"><img src="images/t2.png" class="thumb" border="0"/></a>
<a href="#" rel="images/3.png" class="image"><img src="images/t3.png" class="thumb" border="0"/></a>

demodownload

18 Comments

  • CSS Brigit | Create a simple gallery with jQuery

    Create a simple gallery with jQuery…

    This is a simple introduction for beginners into how to use jQuery to create a simple image gallery using the basics of jQuery.

  • Jake

    do you have a working demo? its only a screenshot that I can see when I click your DEMO button.

  • Ashley (author)

    @jake here’s the link http://papermashup.com/demos/jquery-gallery/ click the thumbnails under the image to switch the image. You may have been confused by the fact that I’m using screenshots of other sites in the gallery. Let me know if you have any probs :)

  • Yoosuf

    Cool, if you guys wanted to know step by step try out this

    http://eyoosuf.blogspot.com/2009/02/simple-gallery-with-jquery.html

  • Evulgo Media

    WAW!
    Just as i needed.
    Thank a lot!

  • jQuery gallery update with title and description | Papermashup.com

    [...] Simple jQuery Gallery 5 Comments [...]

  • Simple jQuery Gallery – Un sencilla galería de imágenes - CSS | pixelco.us blog

    [...] Web: papermashup.com/simple-jquery-gallery [...]

  • Jake

    @ashley. Thanks, its ok for now. But how about if I want to include a description or even a title to the photos?

  • Nathaniel

    What happened to the description? I saw it appear in the demo. But all of a sudden … no description. What happened? Can you bring it back or send me the files?

    I love the simplicity of this gallery. Thanks for you help.

  • Ashley (author)

    @Nathaniel your on the wrong post :) I wrote a new post with the title and description over here: http://papermashup.com/jquery-gallery-update-with-title-and-description/

  • Jose luis Rivero

    Very nice website

  • Alfred

    Perhaps a preload images will be necessary?… Because until you’ve picked a thumb, the transition effect between big images don’t show… The first time is “estatic”

    Simple, efective, easy and great!… Thanks!!… Just that i need!!

  • Ashley (author)

    @Alfred, good suggestion. I’ll look to update the post when i get some time

  • Alfred

    Ashley… I put a flash video inside … and it works fine… now is a -basic- multimedia gallery too =D

    = ] Thanks again!

  • Steve

    Great gallery, it was easy to use and looks very slick. I was curious how to alter the code in order to have more than one gallery on the page? I’m assuming it’s a matter of editing the short script and changing the id’s for the second gallery to something like “image2″, but my attempts have been unsuccessful. Thanks

  • Iarrieta

    Hi

    Very nice your script but I have a little problem I don’t understand. I use your code and in local server works but in online server don’t

    It’s very rare. What may be wrong?

  • Iarrieta

    Forget it, was a simple distraction with .JPG and .jpg

    Sorry

  • Ashley (author)

    @Iarrieta, no problem glad to hear you got it sorted ;)

Leave a comment...

Add your comment below, or trackback from your own site. You can also subscribe to these comments via RSS.

Be nice. Keep it clean. Stay on topic. No spam.

You can use these tags:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

This is a Gravatar-enabled site. To get your own globally-recognized-avatar, register at Gravatar.