Simples Galeria feito em jQuery

Recentemente, fui convidado para codificar uma galeria de fotos muito simples com o jQuery. É realmente simples e é a primeira vez que eu construí uma galeria com jQuery. Ele funciona através da utilização do link para a imagem grande da tag rel que estabelecemos em nosso código html. nós então substituir o conteúdo da div com o id da #image. As funções  hide() e fadeIn() são opcionais. Confira a demonstração abaixo e, como de costume, você pode baixar o código completo!

[sourcecode language=”javascript”]

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

[/sourcecode]

Abaixo está o código HTML. note que usamos o atributo rel que detém o link para a imagem de tamanho completo. Tomamos esse atributo e obter o valor usando JavaScript.

[sourcecode language=”html”]</pre>
<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>
<pre>[/sourcecode]

Para ver uma demostração clique aqui, para baixar clique aqui.
Fonte: http://papermashup.com/simple-jquery-gallery/