jQuery: Fazendo um SlideShow (Galeria de Fotos)

Canal: JavaScript  |  Autor: Jonathan Lamim Antunes  |  Publicado em: 20/03/2009  |  Views: 10.570

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.

Creative Commons Esta obra está licenciada sob uma Licença Creative Commons. Você pode copiar, distribuir, exibir, executar, desde que seja dado crédito ao autor original (Citando nome do autor, data, local e link de onde tirou o texto). Você não pode fazer uso comercial desta obra. Você não pode criar obras derivadas.
Vote no artigo:
NR. DE VOTO(S): [5]

Compartilhe:

[x] Fechar Preencha os campos abaixo para indicar esta página:
Seu nome:
Seu e-mail:
Nome do indicado:
E-mail do indicado:
Deixe uma mensagem:
Anti-spam:

(nova imagem)
Preencha o que vê:
Twitter diHITT Facebook delicious envie por e-mail comentar

comentarComentários:

Preencha o formulário para comentar:

[x] Fechar
Nome:*
E-mail:* (não será exibido)
Site: (http://)
Comentário:*
Anti-spam:

(nova imagem)
Preencha o que vê:

Deseja receber as respostas dos comentários

Luciano Ferreira
Publicado em:
27/05/2009 - 11:42
Ótimo recurso. Muitas vezes tenho um enorme trabalho para montar um slide em flash sendo que com o js é muito mais fácil e provavelmente o resultado final deve ficar bem mais leve que o swf. Vou testar para ver.
Vivi
Publicado em:
27/12/2009 - 23:00
Vivi
COmo faço pra esse efeito funcionar com o livequery?
to com um problema em um site, e os efeitos nao aocntecem, nao sei mais o q fazer...

obrigada