Galeria de fotos (slideshow) com jQuery

nov 22,2011 - by Superwave 0

Hoje vou ensinar a criar uma galeria de fotos (ou slideshow) usando o jQuery. Pra quem ainda não sabe: o jQuery é um framework de JavaScript desenvolvido para codificação rápida (leia-se relâmpago).

O lema do jQuery é The Write Less, do More que em bom português significa “Escreva menos, faça mais”. E é exatamente isso que o jQ te proporciona: fazer muito mais funcionalidades e efeitos com muito menos código.

Veja um exemplo on-line do resultado desta aula.

Pra aula de hoje você vai precisar de – apenas – duas coisas:

Última versão do jQuery: http://jquery.com/ – Clique no botão Download ( jQuery );
Última versão do plugin jCycle para jQuery: http://malsup.com/jquery/cycle/

Depois de ter feito o download dos dois arquivos .js é só incluí-los no seu site assim:

1 <head>

`2`	`<script` `src="_pasta_/jquery.js"` `type="text/javascript"></script>`

`3`	`<script` `src="_pasta_/jcycle.js"` `type="text/javascript"></script>`

4 </head>

Lembrando que esse código deve ir entre as TAGs <head> e </head> do seu site.

Depois disso, você cria uma div com o id que quiser (vamos usar #slideshow como exemplo) e dentro dela coloca as fotos do seu slideshow, por exemplo:

`1`	`<div` `id="slideShow">`

`2`	`<img` `src="imagens/foto1.jpg"` `alt="Primeira Foto"` `width="300"` `height="200"` `/>`

`3`	`<img` `src="imagens/foto2.jpg"` `alt="Segunda Foto"` `width="300"` `height="200"` `/>`

`4`	`<img` `src="imagens/foto3.jpg"` `alt="Terceira Foto"` `width="300"` `height="200"` `/>`

5 </div>

Depois é só voltar lá dentro do <head> do seu site e colocar o seguinte bloco de javascript:

`1`	`<script` `type="text/javascript">`

2 <!--

`3`	`$(function() {`

`4`	`$('#slideShow').cycle({ fx: 'fade' });`

5 });

6 // -->

`7`	`</script>`

Com isso você definiu qual a div que contem o slideshow (repare que o ID da div vai ali no começo da terceira linha) e o jQuery inicia o efeito sozinho.

Mas só isso? Sim. Você já tem um slideshow, automático, com efeito de transição fade pronto pra ser usado!

Veja como ficou a galeria criada neste exemplo.

No site do jCycle você vai ver dezenas de outros exemplos de transições e opções que podem ser usadas na chamada do jCycle. Teste-os, você vai adorar!

Espero que tenham gostado.