CRIE UMA GALERIA DE IMAGENS COM LEGENDAS USANDO ANIMAÇÕES AVANÇADAS

Trabalhei com Flash e ActionScript até cerca de dois anos atrás, quando decidi mudar de rumo e começar a usar mais JavaScript e jQuery. Fiz essa mudança porque queria ter mais controle sobre o DOM usando o JavaScript e em função da falta de suporte a Flash e ActionScript em aparelhos portáteis, como o iPhone. O Flash é bom para animações avançadas, mas as galerias de imagens evoluíram bastante no JavaScript. O principal benefício que encontrei ao aprender ActionScript é a semelhança entre as linguagens no que diz respeito à manipulação de eventos e efeitos.

Compreender os conceitos básicos que envolvem qualquer linguagem de programação nos proporciona uma grande vantagem quando tentamos aprender outra linguagem: a maioria dos conceitos permanece os mesmos, apenas a sintaxe da linguagem muda. Tanto o ActionScript 3 quanto o JavaScript se baseiam em ECMAScript, por isso, têm muitas semelhanças. Em mais de uma oportunidade, tive um momento de déjà vu quando trabalhei com JavaScript, pois a sintaxe e as convenções lembravam muito as do ActionScript.

Lá em 2006, criei minha primeira apresentação animada orientada por XML em Flash 8. Era um aplicativo bem bacana. Se passássemos um arquivo XML formatado para o arquivo Flash, ele iria iterar pelo XML, adicionar slides e animá-los, permitindo que clicássemos em cada slide, e abrir um link, como mostra a Figura 5-14. Tive muito orgulho desse script. Tanto orgulho, na verdade, que o lancei em meu blog (onerutter.com) e ele foi baixado mais de 13.000 vezes. O arquivo Flash tinha cerca de 5 KB e 136 linhas de código, algo muito compacto e impressionante na época. Foi apenas quando comecei a trabalhar com jQuery que percebi o que era código em excesso!

Figura 5-14: Galeria XML em Flash 8 que criei em 2006

O tutorial de galeria de imagens animada a seguir permite a criação de uma semelhante a que criei em 2006 com o Flash, com a exceção de que não é orientada por XML e tem apenas cerca de 85 linhas de código. Podemos aumentar a galeria de imagens adicionando suporte a atualizações XML, se quisermos, mas deixarei essa opção a seu critério. A Figura 5-15 ilustra como a apresentação de imagens em slideshow funcionará.

1. O único código HTML necessário na página é um elemento chamado container. Todo o código HTML necessário é acrescentado ao DOM dentro desse elemento pelo script.

2. A seguir, precisamos confi gurar uma folha de estilo para aplicar um estilo à galeria de imagens. Caso precisemos usar imagens de tamanhos diferentes, será necessário alterar a propriedade .container para refl etir o novo tamanho da imagem. A classe .textstrip foi confi gurada para exibir o texto sobre as imagens à medida que cada imagem é alterada. body {font-family:arial;} ul#nav { list-style-type:none; margin:10px 0 10px; padding:0;} ul#nav li { fl oat:left; width:30px;} ul#nav li a {text-decoration:none; background:#05609A; color:#fff; padding:5px;} ul#nav li a.active { background:#B4F114;} .container {position:relative; height:250px; width:400px; border:1px solid #333; overfl ow:hidden;} .slide-container { position: absolute; top: 0; left: 0;} .slides { fl oat:right;} .slide-text { display:none; font-size:18px;}

img {border:0;} .textStrip {top:0px; display:block; position:absolute; left:-400px; padding:5px; background:#333333; opacity:.9; color:#ffffff; width:100%; }

3. O primeiro passo é criar três matrizes. A primeira matriz, chamada slideArray, é usada para manter os arquivos de imagens que queremos que apareçam como slides na apresentação. A segunda matriz, chamada textArray, contém as legendas exibidas em cada slide. A terceira matriz, chamada de urlArray, contém as URLs que serão aplicadas a cada slide. Essas matrizes podem conter quantos itens quisermos exibir na apresentação de slides.

var slideArray = ["photo1.jpg","photo2.jpg","photo3.jpg","photo4.jpg"]; var textArray = ["Rusty Cable.","Watch Dogs.","Plant Sink.","Urban Cowboy"]; var urlArray = ["http://www.google.com", "http://www.onerutter.com", "http:// www.fl ickr.com", "http://www.facebook.com"];

4. Anexe um elemento chamado slide-container ao elemento container da página. O slide-container, como o nome sugere, contém todos os slides.

$('.container').append('<div class="slide-container" />');

5. Após o elemento slide-container, insira uma lista não ordenada chamada nav. Esse elemento contém os links de navegação para controlar os slides na apresentação e possui uma classe chamada clearfi x vinculada a ele, que confi gura uma propriedade CSS clear após a lista de navegação.

$('.container').after('<ul id="nav" class="clearfi x"></ul>');

6. Crie um loop for limitado pelo valor de slideArray.length. A slideArray

possui quatro valores, então, o maior índice será 3. Confi gure uma variável dentro do loop

for chamada slideNum com um valor igual a i + 1. Ela deve ser confi gurada porque o primeiro valor de i será 0, e a primeira imagem na matriz apresenta um 1 no nome do arquivo; assim, não haverá correspondência correta a menos que criemos essa variável.

for(i=0; i < slideArray.length; i++){ var slideNum = i + 1;

}

7. A primeira declaração adicionada ao loop for anexa um item de lista com o valor de

slideNum.

for(i=0; i < slideArray.length; i++){ var slideNum = i + 1;

$('#nav').append('<li><a href="#" rel="'+slideNum+'">'+slideNum+'</a></li>'); }

8. A seguir, adicione uma variável chamada slideInfo, que conterá o código HTML que precisa ser adicionado à página para que cada slide seja exibido. O HTML compreende várias linhas, assim, se houver espaços extra após cada linha, o JavaScript não funcionará. Para solucionar esse problema, crie várias linhas e concatene-as usando o operador +=. Ele deixa o código mais claro e mais legível.

A primeira linha adiciona um elemento chamado slide-image e usa a variável

SlideNum para inserir um número único para cada linha. A segunda linha adiciona um elemento chamado slide-text, que envolve a legenda trazida de textArray. A terceira linha adiciona a imagem armazenada em slideArray usando o índice do loop.

for(i=0; i < slideArray.length; i++){ var slideNum = i + 1;

$('#nav').append('<li><a href="#" rel="'+slideNum+'">'+slideNum+'</a></li>'); var slideInfo = '<div class='slide-image'+slideNum+' slides'>';

slideInfo += '<div class='slide-text'>'+textArray[i]+'</div>'; slideInfo += '<img src='images/'+slideArray[i]+''/></div>'; }

9. Após a confi guração do HTML, anexe-o ao elemento slide-container.

for(i=0; i < slideArray.length; i++){ var slideNum = i + 1;

$('#nav').append('<li><a href="#" rel="'+slideNum+'">'+slideNum+'</a></li>'); var slideInfo = '<div class="slide-image'+slideNum+' slides">';

slideInfo += '<div class="slide-text activeInfo'+[i]+'">'+textArray[i]+'</div>'; slideInfo += '<img src="images/photo'+slideNum+'.jpg"/></div>';

$('.slide-container').append(slideInfo); }

10. A seguir, adicione mais três variáveis: slideTotal contém o número total de slides derivados de slideArray.length (quatro itens), slideWidth é a largura de cada slide, e slideContainer é a largura multiplicada por slideTotal. O

slideContainer é igual a 1.600.

var slideTotal = slideArray.length; slideWidth = 400;

var slideContainer = slideWidth * slideTotal;

11. Usando o método CSS, defi na a largura do elemento slides-container para um novo valor armazenado na variável slidesContainer criada no passo anterior.

$(".slide-container").css({'width' : slideContainer});

12. Crie um evento click selecionando a tag anchor, que é um descendente do item de lista (li) na lista não ordenada #nav.

$('#nav li a').bind('click', function(){ });

13. Marcação de itens ativos signifi ca que, quando um link é clicado, ele permanece ativo para permitir que saibamos em qual slide estamos atualmente. Para habilitar a marcação de itens ativos, precisamos adicionar duas declarações. A primeira remove a classe active de todos os elementos. A segunda adiciona a classe active ao elemento clicado usando a palavra-chave this.

$('#nav li a').bind('click', function(){ $('#nav li a').removeClass('active'); $(this).addClass('active');

});

14. A próxima declaração adicionada ao manipulador do evento click redefi ne a posição do elemento slide-text para o próximo slide, usando o método CSS, se a animação de slide-text não tiver sido concluída.

$('#nav li a').bind('click', function(){ $('#nav li a').removeClass('active'); $(this).addClass('active'); $(".slide-text").css({ 'top':'-100px', 'right':'0px' }); });

15. A declaração anterior redefi ne a posição de slide-text, mas as duas declarações seguintes interrompem a animação e limpam a fi la. Isso evita que outros efeitos ocorram usando os métodos stop() e clearQueue(), para garantir que todos os efeitos restantes sejam eliminados da fi la. A adição de efeitos à fi la de animação sem sua limpeza pode causar resultados indesejados.

$('#nav li a').bind('click', function(){ $('#nav li a').removeClass('active'); $(this).addClass('active'); $(".slide-text").css({ 'top':'-100px', 'right':'0px' }); $(".slide-text").stop(); $(".slide-text").clearQueue(); });

16. Crie mais três variáveis. A primeira é chamada active, que armazena o valor do atributo da tag rel do item da lista nav ativo atual e subtrai 1. A segunda, slideNum, armazena o mesmo valor que a anterior, mas sem diminuir 1. A terceira é chamada slidePos e é igual ao valor de active multiplicado por slideWidth.

var active = $('#nav li a.active').attr(“"rel") - 1; var slidePos = active * slideWidth;

var slideNum = $('#nav li a.active').attr("rel"); });

17. Usando as variáveis confi guradas no passo anterior, se o valor de active for igual a 2 e o valor de slideWidth for igual a 400, slidePos será igual a 800. Essa é uma variável essencial, usada para mover slides para a esquerda anexando o método animate ao elemento slide-container no exemplo seguinte. O método animate também passa

duration, 1000 e uma função callback.

var active = $('#nav li a.active').attr("rel") - 1; var slidePos = active * slideWidth;

var slideNum = $('#nav li a.active').attr("rel"); $(".slide-container").animate({

left: -slidePos, },1000, function(){ });

});

18. Confi guramos a animação para o slide-text dentro da função callback para a primeira declaração animate. Crie um seletor para a classe única slide-text e use o método CSS para confi gurar os estilos necessários que permitem a slide-text ser exibido sobre a imagem atual.

$('#nav li a').bind('click', function(){ $('#nav li a').removeClass('active'); $(this).addClass('active'); $(".slide-text").css({ 'top':'-100px', 'right':'0px', }); $(".slide-text").stop(); $(".slide-text").clearQueue();

var active = $('#nav li a.active').attr("rel") - 1; var slidePos = active * slideWidth;

var slideNum = $('#nav li a.active').attr("rel"); $(".slides-container").animate({

left: -slidePos, },1000, function(){

$('.slide-text').addClass('textStrip'}); });

19. No último callback, adicione mais um método animate para mover o elemento

slide-text para o slide atual por um segundo; a seguir, deslize o texto para cima, retirando-o do slide. A Figura 5-16 mostra o resultado fi nal deste script no navegador.

var active = $('#nav li a.active').attr("rel") - 1; var slidePos = active * slideWidth;

FRAME SLIDE CONTAINER

Figura 5-16: O resultado fi nal deste script no navegador

No documento Smashing Jquery - Interatividade Avançada Com Javascript Simples (páginas 126-133)