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/](http://jquery.com/) - Clique no botão Download ( jQuery );
- Ú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