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.

Por | @jonathanlamimkt Programação

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 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 itemprop="image" class="lazy" src="_pasta_/imagem1.jpg" width="200px" height="200px" 
    alt="Imagem 1" />
    <img itemprop="image" class="lazy" src="_pasta_/imagem2.jpg" width="200px" height="200px" 
    alt="Imagem 2" />
    <img itemprop="image" class="lazy" 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 .... 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 :

<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.

Mais sobre: internet, programacao, javascript
Share Tweet
DESTAQUESRecomendado
Mais compartilhados
Comentários