Programação » JavaScript

jQuery: Fazendo um SlideShow (Galeria de Fotos)

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.

Publicado em: 20 de março de 2009  |  Leituras: 16.233  |  Canal: JavaScript  |  Autor: Jonathan Lamim Antunes

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 </body> da página que conterá o SlideShow, coloque o seguinte código:

<script language="JavaScript" src="_pasta_/jquery.js" type="text/javascript"></script>

<script language="JavaScript" src="_pasta_/jcycle.js" type="text/javascript"></script>
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.

<div id="slideshow">

<img src="_pasta_/imagem1.jpg" width="200px" height="200px" alt="Imagem 1" />
<img src="_pasta_/imagem2.jpg" width="200px" height="200px" alt="Imagem 2" />
<img src="_pasta_/imagem3.jpg" width="200px" height="200px" alt="Imagem 3" />

</div>
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 <body>...</body>. 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 </body>:

<script language="JavaScript" type="text/javascript">
$(function() {
$("#slideShow").cycle({ fx: "fade" });
});
</script>
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.

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

Efeito de Transição ScrollDown

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

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

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

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

A imagem é substituída ao clicar sobre ela.

<script language="JavaScript" type="text/javascript">
$(function() {
$("#slideshow").cycle({
fx:     "slideY",
speed:  300,
next:   "#slideshow",
timeout: 0
});
});
</script>
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.

Resposta em até 24 horas! (grátis)Dúvidas?
Compartilhe
Share orkut
delicious
Gostei
Nossa url encurtada:
Autor da matéria
Jonathan Lamim Antunes

Graduando em Sistemas de Informação pela UNISA/SP, e programador web da Fivecom - Soluções em web 2.0, uma empresa do grupo Rede Gazeta, afiliada da Rede Globo.
Jonathan Lamim Antunes
site | twitter
Últimas matérias escritas pelo autor:
Matérias relacionadas
PNG transparente no IE (não é PNGfix)PNG transparente no IE (não é PNGfix)Barra de Progresso com AJAXBarra de Progresso com AJAXJSON - JavaScript Object Notation - o que é?JSON - JavaScript Object Notation - o que é?
Últimas matérias
O que você procura para sua vida profissional?O que você procura para sua vida profissional?O planejamento agrega valorO planejamento agrega valorE-mail marketing em 140 caracteresE-mail marketing em 140 caracteres
Últimas notícias
Novos iPods, novo iOS, novo iTunes e nova Apple TVNovos iPods, novo iOS, novo iTunes e nova Apple TVConheça as 100 primeiras cidades atendidas pelo Banda Larga NacionalConheça as 100 primeiras cidades atendidas pelo Banda Larga ...Linus Torvalds diz que mercado já se rendeu ao LinuxLinus Torvalds diz que mercado já se rendeu ao Linux
Dicas do canal
Populares do canal