jQuery: Fazendo um SlideShow

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, diversas opções.

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

Biblioteca JQuery – http://jquery.com
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 até 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.

De 0 a 10, o quanto você recomendaria este artigo para um amigo?

Powered by: