leitura de
Encontrou um problema no conteúdo? Por favor, deixe seu comentário!

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:

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

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

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:

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

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

Thiago Belem / Blog

Thiago Belem


Publicado

Thiago Belem / Blog

Thiago Belem / Blog

Artigos e tutoriais sobre desenvolvimento WEB

Continue lendo