Criar slideshow jQuery em 3 passos

Há vários programas que podem fazer slideshows com animação de imagens imagens, uns gratuitos outros pagos. No entanto, nos dias que correm, em que se dá cada vez mais importância à simplicidade e fluidez das páginas Web¹, o ideal é executar essa tarefa de uma maneira “clean”, não sobrecarregada de efeitos e transmitindo apenas o essencial para  aumentar a usabilidade e motivar o visitante a aprofundar o conhecimento do site. Recorrendo às bibliotecas JavaScript  jQuery² e a uma extensão (plugin) concebida para este, o JQuery Cycle, esta tarefa torna-se extremamente fácil e rápida.

Um exemplo prático do funcionamento destas rotinas que vou explicar pode ser visto na home page deste Site, já que a animação que aí se encontra foi criada tendo como base  os procedimentos cuja enumeração vou dar de seguida. Note que  não é preciso recorrer ao “Flash” ou à criação de animações por via de software dedicado, geralmente pesado e pouco flexível.

1. Instalar as bibliotecas jQuery e Cycle

Este é, claro, o primeiro passo para pôr o slideshow a funcionar: instalar as bibliotecas que afinal fazem todo o trabalho:

- Biblioteca “jquery-1.4.1.min.js“;

- Biblioteca “jquery.cycle.all.min.js” (para ter todos os efeitos disponíveis do Cycle);

A indicação dos respectivos paths deve ser feita antes do fim do tag </head> em todas as páginas em que tiver de pôr a funcionar as animações, tendo o cuidado de indicar o caminho correcto para elas serem carregadas  do servidor onde as instalou.  Se estiver a trabalhar com uma aplicação tipo WordPress (para o que é dado o exemplo acima), bastará inserir esses links no ficheiro header.php. Normalmente  as bibliotecas são colocadas no directório jquery, abaixo daquele onde se encontra o seu “template” ou ficheiros HTML.

O download destas bibliotecas (note que o nome das mesmas pode ir variando, donde também a descrição que deverá usar acima) pode ser feito gratuitamente dos respectivos sites.

A definição das funções de animação ficam por conta do plugin Cycle, as quais estão muito bem documentadas no seu site.

O script, que deverá igualmente colocar na página onde pretende pôr a correr o slideshow e antes deste, tem na sua configuração básica a seguinte forma:

<script type=”text/javascript”>

$(document).ready(function() {

$(‘.slideshow’).cycle({

fx: ‘fade’ //ou outro tipo de transição como: scrollHorz, scrollUp, shuffle, etc…

});

});

No exemplo do  site “complicamos” um pouco  mais o script, sempre recorrendo às varáveis que o plugin proporciona:

“$(document).ready(function()

{ $(‘.slideshow’).cycle({ fx: ‘scrollHorz’, // o efeito escolhido é de rolamento horizontal

timeout: 8000, // o templo em ciclos entre cada slide

next: ‘.depois’, // ‘next’ e ‘prev’ têm a ver com os botões de andar para a frente e para trás

prev: ‘.antes’,

pager: ‘#numeros’, // ‘pager’ determina a exibição de números com links para cada um dos slides

pagerEvent: ‘mouseover’, // as instruções a seguir obrigam a pausar a animação quando o rato está em cima de ‘pager’

pauseOnPagerHover: true”

});

});

Note que se deve sempre enquadrar todos os scripts com as etiquetas: <script type=”text/javascript”> </script> (nos exemplos não o faço para ele não executar as instruções).

2. Criar o código HTML da sequência de Animação

Agora que instalou as bibliotecas e definou o aspecto que quer dar às transições do “slideshow” é preciso pôr tudo isto a funcionar e a tornar-se visível. No caso em concreto apenas coloquei no ficheiro  e lugar onde quero fazer aparecer a animação esta  linha³:

Bom: isto é feito assim por uma questão de “limpeza” do código que invoca um ficheiro dedicado – o especial.php – onde realmente toda a “acção”  se desenrola…

Neste ficheiro bastará colocar links para as imagens que pretende utilizar,  enquadrando-as dentro do selector “slideshow”, como definido acima⁴.

No caso exemplificado “compliquei” mais um pouco com os seguintes objectivos:

Assim, o conteúdo do ficheiro especial.php passa a ser o que poderá ver se  fizer CTRL+U⁶ na página home deste site e vir o que está  na área a seguir ao comentário: .

São apenas 50 linhas de código; mas se apenas pretender mostrar a animação a correr  com o tipo de transição e efeitos que escolheu no script,  bastará algo tão simples como linkar para as imagens entre o selector “slideshow”⁴, assim:

<div class=”xxx”>

<<img src=”http://imagem_um.xxx” alt=”" />

<<img src=”http://imagem_dois.xxx” alt=”" />

</div>

3. Criar as Folhas de Estilo do Slideshow (CSS)

Como pode ver no exemplo dado o “plugin” precisa de saber como deverá exibir – “formatar” – as animações, botões, etc.

Estas definições são estabelecidas nas variáveis entre os respectivos parêntesis; no caso acima, e como pode ver, foram usadas as seguintes Classes e ID’s:

-  .slideshow;

-  .depois;

- .antes;

- #numeros;

O conjunto das propriedades e valores usado em todas as declarações para obter a sequência de slides com o aspecto da página principal pode ser visto AQUI.

Como pode verificar não tem nada de mais: trata-se de um conjunto de instruções muito leve mas com uma grande flexibilidade em termos do tipo das  animações que pode produzir e lhe permitem pôr em funcionamento um slideshow em “JavaScript” apenas com a ajuda de um pouco de CSS. Nada de coisas pesadas que consomem imensa memória e tornam os sites demasiado lentos; com a ajuda, claro, do jQuery e do jQuery Cycle, duas ferramentas de uso totalmente livre, tal como o código que agora forneço⁷. Com os selectores e as declarações adequadas é, assim,  possível apenas com o recurso às “style sheets” pôr o plugin a fazer sobreposição de texto e links nas animações, dando-lhe um aspecto mais bonito e profissional.

___________________

1 – Ver o artigo em que explicamos as tendências actuais do Webdesign.

2 – A jQuery entrega mesmo aquilo que promete:  segundo eles próprios afirma trata-se de “uma rápida e concisa biblioteca em JavaScript que simplifica as tarefas transacção de dados,  gestão de eventos, animação e iteracção com o Ajax para o desenvolvimento rápido de aplicações Web”.

3 – Mais uma vez estou a dar um exemplo para o WordPress;  se estiver  dentro de uma página “normal” bastará colocar nela o equivalente às rotinas que se explicam a seguir.

4 – Pode usar qualquer outra designação desde que a mesma seja igual à que se encontra no script.

5 – A  utilização de meta keys foi explicada no artigo que se encontra no link.

6 – No Firefox; no Explorer terá de seguir o menu: “Ver – Ver Código Fonte”.

7 – Deverá citar o autor ou remeter para o link deste artigo caso o use.