Papermashup

Subscribe


Tweets


"@KBedders @elerichardson I'm Free!!!!!! Call / Whatsapp me!!!"

@ashleyford 2 weeks ago

"@KBedders moomin!"

@ashleyford 2 weeks ago

Designer and web developer, Co-founder and Technical Director at Harkable.com. Previously I worked at Spotify, MySpace and InMobi. Contact me - ashley[at]papermashup.com

jQuery gallery update with title and description

AshleyAshley

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

Designer and web developer, Co-founder and Technical Director at Harkable.com. Previously I worked at Spotify, MySpace and InMobi. Contact me - ashley[at]papermashup.com

Comments 9
  • Rosha
    Posted on

    Rosha Rosha

    Reply Author

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


  • naro
    Posted on

    naro naro

    Reply Author

    thank’s ashley


  • GalleryFan
    Posted on

    GalleryFan GalleryFan

    Reply Author

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


  • selimoff
    Posted on

    selimoff selimoff

    Reply Author

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


  • Teemu
    Posted on

    Teemu Teemu

    Reply Author

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


  • HipHopMakers
    Posted on

    HipHopMakers HipHopMakers

    Reply Author

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


  • Jared
    Posted on

    Jared Jared

    Reply Author

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


  • Jake
    Posted on

    Jake Jake

    Reply Author

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


    • Ashley
      Posted on

      Ashley Ashley

      Reply Author

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