LeoBaiano.com

Internet, Blogs, Monetização e Diversão

Novidades por Email

Tutorial: Galeria de imagens (slideshow) com jQuery e o plugin jQuery Cycle

Quando o @rodrigofante me apresentou o seu projeto, Jwitter fiquei simplesmente impressionado e ao descobrir que o responsável pela mágica era o FrameWork jquery coloquei na cabeça que eu precisava estudar. Nos meus primeiros passos consegui fazer um efeito bem “legalzinho” de exibir e apagar uma imagem com efeito fade, gostei tanto que continuei a estudar e hoje em quase todos os projetos aplico uma solução jQuery.

E é para falar de uma dessas soluções que escrevo este post. Já viu aquelas galerias de imagens no estilo slide show? Muitos blogs estão usando plugins que mostram uma imagem e titulo dos posts em destaques, as imagens e chamadas vão se alternando e o efeito fica pra lá de bom. Um dos projetos que estou trabalhando, e logo você vão ouvir falar, precisava de um “truque” desses, não para chamar noticias em destaques mas para exibir imagens aleatórias, vou lá eu em busca de uma solução elegante e encontro o plugin para jquery jQuery Cycle Plugin.

Vamos deixar de papo furado e deixa logo mostrar para vocês como criar a galeria slide show, no futuro ela pode até virar um plugin mas enquanto isso aprende aê como fazer.

Dificuldade: 3;
Conhecimentos necessários: um pouquinho de HTML e CSS.

Veja mais ou menos como vai ficar a galeria: Demonstração

Primeiro você vai precisar baixar o jquery e o jQuery Cycle Plugin. Feito isso, na página onde quer inserir a galeria, você vai chamar os arquivos desta forma:

1
2

<script type="text/javascript" src="../../visual/js/jquery-1.3.2.js"></script>  
<script type="text/javascript" src="../../visual/js/jquery.cycle.js"></script>

Depois de chamar os arquivos você vai precisar construir a função que informa o ID da galeria, o timeout e o speed, o código deve ser esse:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

<SCRIPT language="JavaScript">
<!--
$(function() {  
$('#galeria').show(); //exibe a div pai  
$('#galeria').cycle({  
fx:     'fade',  
timeout: 6000,  
speed: 500,  
next:   '.next',  
prev:   '.previous',  
pager: '.numbers'  
});  
});
// -->
</SCRIPT>

No seu arquivo CSS você vai dar um display none na ID galeria, não se preocupe pois o plugin chama a div tornando-a visivel ao seu tempo.

1
2
3

#galeria {
display:none;
}

Agora estamos prontos para inserir o HTMl da galeria:

1
2
3
4
5
6
7
8

<div id="galeria">
<div class="imagem">
<a href="#" title="TITULO"><img src="IMAGEM" title="TITULO" alt="DESC" /></a>
</div>
<div class="imagem">
<a href="#" title="TITULO"><img src="IMAGEM" title="TITULO" alt="DESC" /></a>
</div>
</div>

Para cada imagem que deve aparecer na galeria você vai criar uma camada com a classe imagem, depois basta editar o CSS para deixar a galeria do seu jeito.

Para incluir aqueles botões de próximo e anterior inclua o código abaixo bem acima da camada galeria:

1
2
3
4

<div id="navegar">  
<span><a class="previous" href="#">Anterior</a></span>  
<span><a class="next" href="#">Próximo</a></span>  
</div>

Veja mais ou menos como vai ficar a galeria: Demonstração

Se você gostou deste post, escreva um comentário e/ou cadastre-se em nosso feed.

Powered by Wordpress | WP Premium theme by WP Remix | Tradução Érico Oliveira
Copyright 2007. LeoBaiano.com. All rights reserved

• Home
• Contato
• Donate
• Sobre
• Twittada