Use your left/right keys to browse tutorials
Simple jQuery Gallery

Simple jQuery Gallery

1 Star2 Stars3 Stars4 Stars5 Stars
Posted on July 16, 2009

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!


 $(function() {
$(".image").click(function() {
var image = $(this).attr("rel");
$('#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>


More tutorials from Papermashup
49 discussions around Simple jQuery Gallery
Newer Comments
  1. Alfred says:

    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!!

  2. Jose luis Rivero says:

    Very nice website

  3. Nathaniel says:

    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.

  4. Jake says:

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

  5. Pingback: Simple jQuery Gallery – Un sencilla galería de imágenes - CSS | blog

  6. Pingback: jQuery gallery update with title and description |

  7. Evulgo Media says:

    Just as i needed.
    Thank a lot!

  8. Yoosuf says:

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

  9. Jake says:

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

  10. Pingback: CSS Brigit | Create a simple gallery with jQuery

Newer Comments

Never miss an update from Papermashup

Get notified about the latest tutorials and downloads.

Subscribe by Email

Get alerts directly into your inbox after each post and stay updated.

Subscribe by RSS

Add our RSS to your feedreader to get regular updates from us.

Get in contact

Please use the form below to get in contact. If your question is related to a free script download, please use the comments on the article page as community members are more likely to respond quicker than I can personally.

About Me

I'm Ashley Ford, Co-founder and Technical Director at London, UK. Previously I worked at InMobi, Spotify and MySpace. My interests include photography and making short videos I'm also an avid F1 fan. I'm always working on side projects. Here are a few: Easy Poll, We Deliver.

What do you specialise in?

I spend a lot of time coding in PHP and MySQL, as well as front end XHTML and CSS. I also specialise in javascript and the jQuery framework as well as being an avid designer. You can find me on dribbble

Interested in advertising?

If you'd like to advertise on please get in touch via the contact link below for advertising opportunities.

How do I contact you

You can contact me here. and I'm available for consultation, freelance, programming book reviews.

Get on the mailing list

Join over 3000 people who have subscribed to the Papermashup inbox message, and be the first to find out about tutorial, competitions and giveaways.