Polaroid Gallery (Galeria de Fotos) com jQuery UI

AGRADEÇA AO AUTOR COMPARTILHE!

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:

  1. Eu poderia ter criado um plugin, mas ele dependeria de tantos outros que eu achei melhor não fazê-lo.
  2. Se eu estivesse usando esse script em produção, eu teria utilizado o smartoptimizer e concatenado os js e css.
  3. 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.
  4. A aparência poderia ser mais próxima da galeria em flash se assim desejássemos.
  5. 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 id="polaroid">

<a href="photos/f1.jpg"><img class="shadow" title="Um belo título" src="photos/tn_f1.jpg" width="102" height="120" /></a>

<a href="photos/f2.jpg"><img class="shadow" title="Outro belo título" src="photos/tn_f2.jpg" width="93" height="120" /></a>

<a href="photos/f3.jpg"><img class="shadow" title="Mais um belo título" src="photos/tn_f3.jpg" width="120" height="106" /></a>

<a href="photos/f4.jpg"><img class="shadow" src="photos/tn_f4.jpg" width="120" height="74" /></a>

<a href="photos/f5.jpg"><img class="shadow" src="photos/tn_f5.jpg" width="120" height="74" /></a>

<a href="photos/f1.jpg"><img class="shadow" title="Um belo título" src="photos/tn_f1.jpg" width="102" height="120" /></a>

<a href="photos/f2.jpg"><img class="shadow" title="Outro belo título" src="photos/tn_f2.jpg" width="93" height="120" /></a>

<a href="photos/f3.jpg"><img class="shadow" title="Mais um belo título" src="photos/tn_f3.jpg" width="120" height="106" /></a>

<a href="photos/f4.jpg"><img class="shadow" src="photos/tn_f4.jpg" width="120" height="74" /></a>

<a href="photos/f5.jpg"><img class="shadow" src="photos/tn_f5.jpg" width="120" height="74" /></a>

<a href="photos/f1.jpg"><img class="shadow" title="Um belo título" src="photos/tn_f1.jpg" width="102" height="120" /></a>

<a href="photos/f2.jpg"><img class="shadow" title="Outro belo título" src="photos/tn_f2.jpg" width="93" height="120" /></a>

<a href="photos/f3.jpg"><img class="shadow" title="Este título gigante é a maior prova de que escrever títulos gigantes é uma coisa gigantesca e funciona… Este título gigante é a maior prova de que escrever títulos gigantes é uma coisa gigantesca e funciona… Este título gigante é a maior prova de que escrever títulos gigantes é uma coisa gigantesca e funciona… Este título gigante é a maior prova de que escrever títulos gigantes é uma coisa gigantesca e funciona… Este título gigante é a maior prova de que escrever títulos gigantes é uma coisa gigantesca e funciona… Este título gigante é a maior prova de que escrever títulos gigantes é uma coisa gigantesca e funciona… " src="photos/tn_f3.jpg" width="120" height="106" /></a>

<a href="photos/f4.jpg"><img class="shadow" src="photos/tn_f4.jpg" width="120" height="74" /></a>

<a href="photos/f5.jpg"><img class="shadow" src="photos/tn_f5.jpg" width="120" height="74" /></a>

</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" />

<script type="text/javascript" src="js/jquery.js"></script>

<!–Arquivo principal do jquery ui–>

<script type="text/javascript" src="js/ui.core.js"></script>

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

<script type="text/javascript" src="js/ui.draggable.js"></script>

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

<script type="text/javascript" src="js/effects.core.js"></script>

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

<script type="text/javascript" src="js/effects.transfer.js"></script>

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

<script type="text/javascript" src="js/jquery.center.js"></script>

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

<script type="text/javascript" src="js/slimbox2.js"></script>

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

<script type="text/javascript" src="js/fx.shadow.js"></script>
[/code]

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.

AGRADEÇA AO AUTOR COMPARTILHE!

3 Comentários

Charles
1

Infelizmente a pagina que demonstra o resultado do script esta caindo em um formulário de login não dando a possibilidade de visualizar o efeito !

Deixe seu comentário

Seu endereço de e-mail não será publicado. Campos com * são obrigatórios!

Você pode usar estas tags e atributos de HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">