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!

gallery

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

demodownload



More tutorials from Papermashup
  • http://meemi.com/etherealformula35 online dog training

    Hi there, its good post about media print, we all understand media is a
    wonderful source of data.

  • http://warmfascist4418.wordpress.com home decorate

    Hi there i am kavin, its my first time to commenting anyplace, when i read this article i thought i could also make comment due
    to this good paragraph.

  • http://www.coscms.org dennis

    What a nice tutorial – i like things that are short – by looking at the few lines i suddenly realized that javascript and jquery is not so hard. Thanks. An eye opener :)