Polaroid Gallery (Galeria de Fotos) com jQuery UI

Um tempo atrás, eu estava desenvolvendo um sistema e procurei na net por uma galeria de fotos interessante. Me deparei com essa belíssima galeria em flash.

Entretanto, notei alguns pontos que me fizeram desistir de usá-la, principalmente:

Ser em flash (praticamente aboli o uso do flash depois que conheci o jquery).
Seu tamanho e o conseqüente tempo de carregamento.

Procurando por uma solução, acabei encontrando algumas usando CSS3 o que também inviabilizava o que eu queria realizar.
Acabei por entender o que eu queria fazer e desenvolvi a técnica demonstrada aqui e descrita abaixo utilizando o JQuery. Antes, porém, permitam-me algumas ressalvas:

Eu poderia ter criado um plugin, mas ele dependeria de tantos outros que eu achei melhor não fazê-lo.
Se eu estivesse usando esse script em produção, eu teria utilizado o smartoptimizer e concatenado os js e css.
Esse script utiliza js obstrusivamente, ou seja, só funciona com js habilitado no navegador. É muito fácil resolver isso, mas onde foi utilizado, não era uma necessidade.
A aparência poderia ser mais próxima da galeria em flash se assim desejássemos.
Só acho viável utilizar tantos scripts externos se boa parte deles já tiver sido carregada em páginas anteriores.

Pra começar, coloque o seguinte código HTML, muito fácil de entender e adaptar:

[code lang=”html”]
<div id="centeredbox"></div>

</div>
[/code]

A seguir, vamos utilizar css para cuidar da aparência de nosso script (mas não só da aparência):

[code lang=”css”]
//Vamos dar cor ao fundo:
body, html{ background:#9E967F;}
//Definimos as características que as imagens dentro da div Polaroid terão:
#polaroid img{
border:none;
background:#FFFFFF;
padding: 5px 5px 13px;
position:absolute;
}
//Mudamos o cursor do mouse para ‘move’ sobre as imagens:
#polaroid img:hover{
cursor:move;
}
//Definimos o tamanho da div Polaroid pra controlar a disposição das imagens:
#polaroid{
width:500px;
height:500px;
}
//Definimos o tamanho da div centeredbox que é usada para direcionar o efeito transfer da jquery ui:
#centeredbox{
width:250px;
height:250px;
}
//Definimos o estilo para o efeito transfer da jquery ui:
.ui-effects-transfer { background:#FFFFFF; }
[/code]

Agora, incluímos um arquivo css externo do plugin slimbox, o jQuery , o jQuery ui e alguns plugins:

[code lang=”html”]
<link href="css/slimbox2.css" rel="stylesheet" />

<!–Arquivo principal do jquery ui–>

<!–Arquivo para o efeito ‘arrastar’ do jquery ui–>

<!–Arquivo principal dos efeitos do jquery ui–>

<!–Arquivo principal do efeito ‘transfer’ do jquery ui–>

<!—Plugin Center (o efeito pode ser conseguido só com CSS)–>

<!—Plugin slimbox de efeito similar ao lightbox–>

<!—Plugin shadow do jquery ui cujo desenvolvimento foi descontinuado –>

Pra terminar a mágica, um pouco de js:

[code lang=”javascript”]
//Função para gerar números aleatórios em js
function randrang(minVal,maxVal,floatVal)
{
var randVal = minVal+(Math.random()*(maxVal-minVal));
return typeof floatVal==’undefined’?Math.round(randVal):randVal.toFixed(floatVal);
}
//Evento onready do jquery
$(function(){
//Criamos a variável thumbs que vai servir como parametro para
//o slimbox
thumbs = ‘[‘;

//Para cada imagem dentro do container #polaroid…
$("#polaroid img").each(function(){
//posicionamos aleatóriamente
var top = randrang(0,$("#polaroid").height());
var left = randrang(0,$("#polaroid").width());
$(this).css(‘top’,top+’px’);
$(this).css(‘left’,left+’px’);
//pegamos o endereço da imagem
thsrc = $(this).attr(‘src’);
//extraímos o prefixo tn_
src = "photos/"+thsrc.substring(10);
//pegamos o título da imagem (que servirá de legenda)
title = $(this).attr(‘title’);
//adicionamos a imagem à variável thumbs
thumbs += ‘["’+src;
//se houver um título, adicionamos ele também
if (title)
thumbs += ‘","’+title;
thumbs += ‘"],’
});
//retiramos a vírgula final de thumbs (isso é POG)
tempthumbs = thumbs.substring(0,thumbs.length -1);
//o uso de ‘eval’ é necessário pro slimbox funcionar
//depois, fechamos a variável thumbs com ‘]’
thumbs = eval (tempthumbs+’]’);

//Aqui, tornamos as imagens dentro de #polaroid arrastáveis e…
$("#polaroid img").draggable({
//Fazemos com que as sombras a sigam quando forem arrastadas
drag: function(){
$(this).next().css(‘top’,$(this).css(‘top’));
$(this).next().css(‘left’,$(this).css(‘left’));
}
});
//Posicionamos as sombras
$(‘.shadow’).shadow({ color: "#444", offset: 3, opacity: 0.3 });

//Centralizamos #centeredbox
$("#centeredbox").center();
//Pra terminar, criamos o evento onclick para cada imagem
$("#polaroid img").click(function(){
//Capturamos o índice da imagem
index = $("#polaroid img").index(this);
//Criamos o efeito transfer da imagem para #centeredbox e…
$(this).effect(‘transfer’,{ to: "#centeredbox", className: ‘ui-effects-transfer’ },500,function(){
//Chamamos o plugin slimbox no ‘callback’
//Passando a ‘array’ (na verdade não é uma array) de imagens e títulos
//e o índice da imagem clicada
$.slimbox(thumbs,index);
});
//Preciso explicar o que isso faz?
return false;
});

});
[/code]

O leitor atento vai perceber que a sombra não acompanha a imagem tão bem quanto deveria, isso é a principal limitação desse script (mas não a única). Se tiver sugestões para resolver isso, para melhorar o script ou tiver dúvidas, basta postar nos comentários.

Veja o resultado aqui.