Profissionais TI – Pra quem respira informação

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:

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

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

//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; }

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

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

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

//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;
	});

});

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.