Caros leitores, hoje vamos ver uma forma de aplicação da biblioteca JQuery. Montaremos um SlideShow, que pode ser usado em galerias de fotos, banners de patrocinadores, enfim, diversar opções.

Para iniciarmos é preciso que vocês façam o download de 2 arquivos necessários para a montagem do nosso SlideShow.

1) Biblioteca JQuery - http://jquery.com
2) Plugin jCycle - http://malsup.com/jquery/cycle/

Após fazer o download desses arquivos, vamos iniciar a criação. Veremos algumas formas diferentes de transição para o SlideShow, fiquem atentos a cada uma delas.

Antes da tag %3C/body%3E da página que conterá o SlideShow, coloque o seguinte código:

%3Cscript language="JavaScript" src="_pasta_/jquery.js" type="text/javascript"%3E%3C/script%3E

%3Cscript language="JavaScript" src="_pasta_/jcycle.js" type="text/javascript"%3E%3C/script%3E
Após ter inserido os scripts na página, vamos agora começar a criação do SlideShow.

O Código Base

Para criar o SlideShow, vamos usar um código base, que será o mesmo para todos os tipos de transição que vamos ver neste tutorial.

Veja abaixo o código.

%3Cdiv id="slideshow"%3E

%3Cimg src="_pasta_/imagem1.jpg" width="200px" height="200px" alt="Imagem 1" /%3E
%3Cimg src="_pasta_/imagem2.jpg" width="200px" height="200px" alt="Imagem 2" /%3E
%3Cimg src="_pasta_/imagem3.jpg" width="200px" height="200px" alt="Imagem 3" /%3E

%3C/div%3E
Pronto, esse é o código responsável por nosso SlideShow. Criamos uma div identificada por "slideshow" e inserimos dentro dela as imagens que ficarão em exposição.

Essas linhas acima podem ser colocadas em qualquer parte da sua página, desde que estejam entre %3Cbody%3E...%3C/body%3E. O nome de identificação do elemento (id) pode ser outro a sua escolha, aqui utilizei slideshow para ficar mais fácil de vocês compreenderem.

Após termos inserido o código base, vamos ver como aplicar os efeitos de transição.

Efeito de Transição FADE

Esse efeito é como se uma imagem fosse sumindo e a outra aparecendo. Para utilizá-lo, basta usar o seguinte código antes da tag %3C/body%3E:

%3Cscript language="JavaScript" type="text/javascript"%3E
$(function() {
$("#slideShow").cycle({ fx: "fade" });
});
%3C/script%3E
Esse código contém a função responsável por executar a troca de imagens, na linha 3 foi apontado o elemento que receberá a aplicação da função, no nosso caso, "#slideshow".

Efeito de Transição Zoom

A imagem vai diminuindo de tamanho ate desaparecer e em seguida a próxima imagem vai aumentando de tamanho.

%3Cscript language="JavaScript" type="text/javascript"%3E
$(function() {
$("#slideshow").cycle({
fx:    "zoom",
sync:   0,
delay: -4000
});
});
%3C/script%3E

Efeito de Transição ScrollDown

A imagem vai saindo da tela e a outra vai entrando.

%3Cscript language="JavaScript" type="text/javascript"%3E
$(function() {
$("#slideshow").cycle({
fx:    "scrollDown",
sync:   0,
delay: -2000
});
});
%3C/script%3E
Efeito de Transição Shuffle

A imagem vai sendo colocada uma abaixo da outra, revelando a imagem seguinte.

%3Cscript language="JavaScript" type="text/javascript"%3E
$(function() {
$("#slideshow").cycle({
fx:    "shuffle",
delay: -4000
});
});
%3C/script%3E
Efeito Click Transitions Next

A imagem é substituída ao clicar sobre ela.

%3Cscript language="JavaScript" type="text/javascript"%3E
$(function() {
$("#slideshow").cycle({
fx:     "slideY",
speed:  300,
next:   "#slideshow",
timeout: 0
});
});
%3C/script%3E
Bom pessoal, é isso aí, esse foram alguns efeitos montados usando a bilbioteca jQuery e o plugin jCycle, em breve mais novidades sobre jQuery.

Até a próxima.