jQuery gallery update with title and description

Posted on July 21, 2009 by Ashley

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