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
  • http://tourinnepal.co Rosha

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

  • http://narottamajati.com naro

    thank’s ashley

  • GalleryFan

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

  • selimoff

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

  • Teemu

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

  • http://www.hiphopmakers.com HipHopMakers

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

  • http://www.jared2.de Jared

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

  • http://magazine-templates.blogspot.com Jake

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

    • http://www.papermashup.com Ashley

      @jake i knew someone would ask for a title and description ;)