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:
<head> <script src="_pasta_/jquery.js" type="text/javascript"></script> <script src="_pasta_/jcycle.js" type="text/javascript"></script> </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:
<div id="slideShow"> <img src="imagens/foto1.jpg" alt="Primeira Foto" width="300" height="200" /> <img src="imagens/foto2.jpg" alt="Segunda Foto" width="300" height="200" /> <img src="imagens/foto3.jpg" alt="Terceira Foto" width="300" height="200" /> </div>
Depois é só voltar lá dentro do <head> do seu site e colocar o seguinte bloco de javascript:
<script type="text/javascript">
<!--
$(function() {
$('#slideShow').cycle({ fx: 'fade' });
});
// -->
</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. 
Você também vai gostar de ler:
- PNG’s transparentes no Internet Explorer com jQuery (IE PNGFix)
- Cantos arredondados e estilizados com jQuery Corner
- Validação de formulários com jQuery
- Criando um menu retrátil com CSS e jQuery
- Entendendo os seletores do jQuery
Com as tags Código, Configuração, Desenvolvimento, Download, Framework, Funcionalidade, HTML, JavaScript, jQuery, JS, Programação, Projeto, Projetos, Script, Scripts, Slideshow, Software
Escrito por Thiago Belem
Gostou desse artigo?
Não se esqueça de assinar o RSS e divulgue-o para o mundo:
esse exemplo está errado !
@Alessandro
Poderia me dizer onde está o erro? Ou o que você está vendo de errado? Várias outras pessoas usaram esse tutorial e conseguiram fazer o SlideShow… Você chegou a ver o exemplo? Foi feito usando o mesmo codigo… E misteriosamente ele funciona, não?
como fazer para ele mostrar as imagens do banco de dados mysql.
otimo tuto
@Hugo
Para trazer as imagens do MySQL você deve fazer uma consulta e montar a lista de imagens no HTML… Estude um pouco de MySQL e PHP que você conseguirá.
muito bom o tutu parabens !!
Olá, primeiramente quero dizer que esse site está de parabéns cara.
Bom tutorial sobre slides, mais não é esse tipo de slide que eu procuro , estou procurando um que tenha botões, tipo de voltar avançar e pause e que agente possar digitar textos sobre a imagen. Tipo do site uol.
Se você puder ajudar fico agradecido!
Ótima cara, Obrigado!
Tenho uma imagem com 22k cada uma. São 13 imagens.
As vezes elas não carregam e o slideshow não acontece.
Você tem alguma idéia de como arrumar isso?
Thiago,
Com este script uma pagina de fotos fica com uma apresentação super legal… valeu pela dica/instruçao de como usar.
ta lindo demais
muito bom cara…
parabens pela iniciativa
Ola,
fiz os passos do seu tutorial e deu certo. Coloquei ele na barra lateral, porém esta dando conflito com o plugin de slide show que tenho instalado no wordpress. Alguém tem uma solução para que não dê este conflito?
obrigado tiago!
Tiago, muito bom o seu blog.
Não estou conseguindo colocar o slide no meu Wordpress. Devo colocar o script no arquivo Header e a div no Home? Preciso definir a div slidshow no arquivo CSS?
meu tema é este:http://wpesp.com
Me ajude, por favor.
@Peri
Recomendo que você procure um plugin do WP próprio pra isso… Não deve ser dificil de achar.
Tutorial muito bem apresentado. Parabéns.
Thiago, teria como a gente colocar um botão de avançar, pausar e retrocer para ter controle das imagens? Como seria a idéia?
Obrigado.
Leandro.
@Leandro
Dá uma olhada no site do plugin (link no fim do artigo) que lá tem vários exemplos de passadores e paginadores.
Muito bom Thiago !
me ajudou bastante, alem de nao ter que ficar procurando pela web ;s
funcionou perfeitamente.
obrigado!
Oi Tiago, peguei seu tutorial e implementei um slideshow de logotipos numa página em PHP, e essa página esta com um problema que já venho quebrando cabeça há vários dias… as imagens as vezes (principalmente na primeira vez que carrega a página) não ficam centralizadas… elas as vezes ficam meio alinhadas pra direita… Eis o código abaixo:
Untitled Document
$(function() {
$(‘#pai’).show(); //exibe a div pai
$(‘#pai’).cycle({
fx: ‘fade’,
timeout: 200,
speed: 400,
next: ‘.next’,
prev: ‘.previous’,
pager: ‘.numbers’
});
});
#pai {
display:none;
margin: auto;
}
<img src=”logos/”/>
@Rodrigo
Isso acontece pq o site ainda não sabe o tamanho da imagem, especifica altura e largura delas, exemplo:
<img src="imagem.jpg" width="100px" height="10px" />Que vai funcionar!
E obrigado pela visita…
Não funcionou nadaaaaa. Já fiz de tudo!!!
@Marcos
Tente novamente, outras pessoas já fizeram e conseguiram.. Faça na ordem que está explicado e não deixe de olhar o código fonte do exemplo dado.
funfo não!
Me precipitei novamente hehe.
Dei uma olhada e ja achei.
Abs
Como eu poderia alterar o tempo de fade, por exemplo, deixar ele mais lento.
Obrigado de novo !
Perfeito Thiago!
Em breve vou dar uma pesquisada sobre jQuery. Mas primeiro deixa eu aprender mais do PHP hehe, fazem pouco mais de 2 meses que estou mechendo com site.
Valeu!
@Diego
Funcionou bem com outros usuários que tentaram… Verifica se você fez tudo direitinho.
Abraços