9

Dec

Polaroid Gallery com JQuery UI

Posted by Robson  Published in Javascript, JQuery

Antes de mais nada, veja o resultado aqui.
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:

  1.  
  2. <div id="centeredbox"></div>
  3. <div id="polaroid">
  4.     <a href="photos/f1.jpg"><img class="shadow" title="Um belo título" src="photos/tn_f1.jpg" width="102" height="120" /></a>
  5.    <a href="photos/f2.jpg"><img class="shadow" title="Outro belo título"  src="photos/tn_f2.jpg" width="93" height="120" /></a>
  6.      <a href="photos/f3.jpg"><img class="shadow" title="Mais um belo título"  src="photos/tn_f3.jpg" width="120" height="106" /></a>
  7.     <a href="photos/f4.jpg"><img class="shadow" src="photos/tn_f4.jpg" width="120" height="74" /></a>
  8.     <a href="photos/f5.jpg"><img class="shadow" src="photos/tn_f5.jpg" width="120" height="74" /></a>
  9.     <a href="photos/f1.jpg"><img class="shadow" title="Um belo título" src="photos/tn_f1.jpg" width="102" height="120" /></a>
  10.     <a href="photos/f2.jpg"><img class="shadow" title="Outro belo título"  src="photos/tn_f2.jpg" width="93" height="120" /></a>
  11.     <a href="photos/f3.jpg"><img class="shadow" title="Mais um belo título"  src="photos/tn_f3.jpg" width="120" height="106" /></a>
  12.     <a href="photos/f4.jpg"><img class="shadow" src="photos/tn_f4.jpg" width="120" height="74" /></a>
  13.     <a href="photos/f5.jpg"><img class="shadow" src="photos/tn_f5.jpg" width="120" height="74" /></a>
  14.     <a href="photos/f1.jpg"><img class="shadow" title="Um belo título" src="photos/tn_f1.jpg" width="102" height="120" /></a>
  15.     <a href="photos/f2.jpg"><img class="shadow" title="Outro belo título"  src="photos/tn_f2.jpg" width="93" height="120" /></a>
  16.     <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>
  17.     <a href="photos/f4.jpg"><img class="shadow" src="photos/tn_f4.jpg" width="120" height="74" /></a>
  18.     <a href="photos/f5.jpg"><img class="shadow" src="photos/tn_f5.jpg" width="120" height="74" /></a>
  19. </div>
  20.  

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

  1.  
  2. //Vamos dar cor ao fundo:
  3. body, html{ background:#9E967F;}
  4. //Definimos  as características que as imagens dentro da div Polaroid terão:
  5. #polaroid img{
  6.         border:none;
  7.         background:#FFFFFF;
  8.         padding: 5px 5px 13px;
  9.         position:absolute;
  10. }
  11. //Mudamos o cursor do mouse para ‘move’ sobre as imagens:
  12. #polaroid img:hover{
  13.         cursor:move;
  14. }
  15. //Definimos o tamanho da div Polaroid pra controlar a disposição das imagens:
  16. #polaroid{
  17.         width:500px;
  18.         height:500px;
  19. }
  20. //Definimos o tamanho da div centeredbox que é usada para direcionar o efeito transfer da jquery ui:
  21. #centeredbox{
  22.         width:250px;
  23.         height:250px;
  24. }
  25. //Definimos o estilo para o efeito transfer da jquery ui:
  26. .ui-effects-transfer { background:#FFFFFF; }
  27.  

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

  1.  
  2. <link href="css/slimbox2.css" rel="stylesheet" />
  3.  
  4. <script type="text/javascript" src="js/jquery.js"></script>
  5. <!–Arquivo principal do jquery ui–>
  6. <script type="text/javascript" src="js/ui.core.js"></script>
  7. <!–Arquivo para o efeito ‘arrastar’ do jquery ui–>
  8. <script type="text/javascript" src="js/ui.draggable.js"></script>
  9. <!–Arquivo principal dos efeitos do jquery ui–>
  10. <script type="text/javascript" src="js/effects.core.js"></script>
  11. <!–Arquivo principal do efeito ‘transfer’ do jquery ui–>
  12. <script type="text/javascript" src="js/effects.transfer.js"></script>
  13. <!—Plugin Center (o efeito pode ser conseguido só com CSS)–>
  14. <script type="text/javascript" src="js/jquery.center.js"></script>
  15. <!—Plugin slimbox de efeito similar ao lightbox–>
  16. <script type="text/javascript" src="js/slimbox2.js"></script>
  17. <!—Plugin shadow do jquery ui cujo desenvolvimento foi descontinuado –>
  18. <script type="text/javascript" src="js/fx.shadow.js"></script>
  19.  

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

  1.  
  2. //Função para gerar números aleatórios em js
  3. function randrang(minVal,maxVal,floatVal)
  4. {
  5.   var randVal = minVal+(Math.random()*(maxVal-minVal));
  6.   return typeof floatVal==‘undefined’?Math.round(randVal):randVal.toFixed(floatVal);
  7. }
  8. //Evento onready do jquery
  9. $(function(){
  10.         //Criamos a variável thumbs que vai servir como parametro para
  11.         //o slimbox
  12.         thumbs = ‘[';
  13.        
  14.         //Para cada imagem dentro do container #polaroid...
  15.         $("#polaroid img").each(function(){
  16.                 //posicionamos aleatóriamente
  17.                 var top = randrang(0,$("#polaroid").height());
  18.                 var left = randrang(0,$("#polaroid").width());
  19.                 $(this).css('top',top+'px');
  20.                 $(this).css('left',left+'px');
  21.                 //pegamos o endereço da imagem
  22.                 thsrc = $(this).attr('src');
  23.                 //extraímos o prefixo tn_
  24.                 src = "photos/"+thsrc.substring(10);
  25.                 //pegamos o título da imagem (que servirá de legenda)
  26.                 title = $(this).attr('title');
  27.                 //adicionamos a imagem à variável thumbs
  28.                 thumbs += '["'+src;
  29.                 //se houver um título, adicionamos ele também
  30.                 if (title)
  31.                         thumbs += '","'+title;
  32.                 thumbs += '"],’
  33.         });
  34.         //retiramos a vírgula final de thumbs (isso é POG)
  35.         tempthumbs = thumbs.substring(0,thumbs.length -1);
  36.         //o uso de ‘eval’ é necessário pro slimbox funcionar
  37.         //depois, fechamos a variável thumbs com ‘]’
  38.         thumbs = eval (tempthumbs+‘]’);
  39.        
  40.         //Aqui, tornamos as imagens dentro de #polaroid arrastáveis e…
  41.         $("#polaroid img").draggable({
  42.                 //Fazemos com que as sombras a sigam quando forem arrastadas
  43.                 drag: function(){
  44.                         $(this).next().css(‘top’,$(this).css(‘top’));
  45.                         $(this).next().css(‘left’,$(this).css(‘left’));
  46.                 }
  47.         });
  48.         //Posicionamos as sombras
  49.         $(‘.shadow’).shadow({ color: "#444", offset: 3, opacity: 0.3 });
  50.        
  51.         //Centralizamos #centeredbox
  52.         $("#centeredbox").center();
  53.         //Pra terminar, criamos o evento onclick para cada imagem
  54.         $("#polaroid img").click(function(){
  55.                 //Capturamos o índice da imagem
  56.                 index = $("#polaroid img").index(this);
  57.                 //Criamos o efeito transfer da imagem para #centeredbox e…
  58.                 $(this).effect(‘transfer’,{ to: "#centeredbox", className: ‘ui-effects-transfer’ },500,function(){
  59.                         //Chamamos o plugin slimbox no ‘callback’
  60.                         //Passando a ‘array’ (na verdade não é uma array) de imagens e títulos
  61.                         //e o índice da imagem clicada
  62.                         $.slimbox(thumbs,index);               
  63.                 });
  64.                 //Preciso explicar o que isso faz?
  65.                 return false;
  66.         });
  67.        
  68. });
  69.  

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.

Tags: , , , , ,

Related Articles

No user responded in this post

Subscribe to this post comment rss or trackback url
Leave A Reply

 Username (Required)

 Email Address (Remains Private)

 Website (Optional)