Use your left/right keys to browse tutorials
jQuery gallery update with title and description

jQuery gallery update with title and description

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

I decided to add a title and description to the simple gallery tutorial i posted a few days back as an addition for those of you wanting to display further info about a picture in the gallery.

The new code is below, you can see that I’ve wrapped the main image and caption in a div ‘#gallery’ which is used to fade in our new image into the retrospective div elements. The other addition to the html is that in order to display a title and description I’ve added a ‘title’ attribute and ‘content’ attribute to the a tag. I’ve tried to keep this as simple as possible so any beginners can get to grips with the mechanics of developing with jQuery.

gallery-2

The Code (updated)

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

The HTML

<div id="gallery">
    <div id="image"><img src="images/1.png" border="0"/></div>
    <div id="caption"> <span id="title">Juan Diego Velasco</span>
      <div id="description">I've been working at Gattaca as Web Design Director for almost four years, but I’m into web design since 1997, when I graduated from high school and began exploring HTML.</div>
    </div>
  </div>
  <a href="#" rel="images/1.png" title="Juan Diego Velasco" content="I've been working at Gattaca as Web Design Director for almost four years, but I'm into web design since 1997, when I graduated from high school and began exploring HTML." class="image"><img src="images/t1.png" class="thumb" border="0"/></a> <a href="#" rel="images/2.png" title="Mail Chimp" content="Price Comparison to Constant ContactMailChimp's a do-it-yourself email marketing tool, kind of like the other guys. Except we don't 'dumb down' our features. We give you powerful email marketing features that big companies spend big money on, and we make them simple and affordable (and a little fun)." class="image"><img src="images/t2.png" class="thumb" border="0"/></a> <a href="#" rel="images/3.png" title="Silverback" content="Silverback makes it easy, quick and cheap for everyone to perform guerilla usability tests with no setup and no expense, using hardware already in your Mac." class="image"><img src="images/t3.png" class="thumb" border="0"/></a>
  <div class="clear"></div>

Any questions queries or comments let me know below :)

demodownload



More tutorials from Papermashup
Comments
9 discussions around jQuery gallery update with title and description
  1. Rosha says:

    Its seems gud but i need a tab with history on it……….. any ways thankx

  2. naro says:

    thank’s ashley

  3. GalleryFan says:

    Great Gallery Ashley!
    Im serching for the next and prev buttons, too.
    Any help?

  4. selimoff says:

    Im serching for the same, the next and prev buttons.
    Thank to the author, great gallery

  5. Teemu says:

    This one is nice! Only thing I’m still missing is Next and Prev buttons. Any changes for that?

  6. HipHopMakers says:

    I love you site. please keep up the great work.

  7. Jared says:

    hm looks fine but it is not very accessible without js :(

  8. Jake says:

    thanks again. this is the follow-up answer to my next question :)





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
OR

Subscribe by RSS

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

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 Harkable.com 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 Papermashup.com 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.