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
[update]
Seguindo a dica do Adriano, se você quiser que o número que corresponde a imagem, no menu de navegação, altere a cor conforme as imagens vão passando é só utilizar a classe “activeSlide” do próprio plugin.
Valeu Adriano.
[/update]
Se você gostou deste post, escreva um comentário e/ou cadastre-se em nosso feed.
Comentários
Não testei no IE6, apesar de uma grande parcela continuar a utilizar este navegador se nós continuarmos a pensar nele nunca vamos nos livrar deste “peso”.
Vou ver se funciona no IE6 e volto aqui pra te falar!
Oi Adriano, muito bom esse code box né? O plugin que utilizo é o WP-Syntax e você pode baixar ele aqui:
Parabens pelo tutorial, me ajudou muito.
Só me diga uma coisa, para inserir mais ou menos fotos e nao somente 4 como eu faço?
Fabio, a tempos não uso o FCK, acho que você pode inserir 4 e depois abrir novamente a janela para inserir quantas quiser.
Adorei! Parabéns! Vc tem me ajudado muito com os seus artigos!
Só uma pergunta, como faria para os botões de números ficar dentro da div com a imagem (sobre a imagem)!? Tem como!?
Para ficar parecido com banners em flash!
Abraços!
Saberia como fazer para que o índice alterasse de acordo com as imagens?
Por exemplo ao trocar a imagem, o evento do número fica active no css, ajuda bastante na navegação do usuário.
Ótimo tutorial, parabéns.
Obrigado.
Achei aqui, é só utilizar a classe “activeSlide” do próprio JQuery Cycle Plugin.
Talvez seja interessante adicionar esta informação no post..
Valeu!
Massa era o q eu tava procurando…
agora será q tem como fazer pra ele ficar pegando as fotos das noticias do meu banco de dados?
Genarks, claro que tem parceiro é só utilizar PHP para puxar as imagens e fazer um loop exibindo elas em listas para ficar igual o exemplo acima.
Genarks, mais pronto do que o explicado no texto acima só pegando os dados FTP do teu site e fazendo no teu lugar, mas ai terei que receber a grana no teu lugar né. 
Tenta seguir o tutorial e se surgir alguma dúvida pergunta aqui que terei o maior prazer em ajudar.
ae brother , beleza ? po , muito show esse seu tuto .
parabéns mesmo , eu olhei outros tutos e estavão ruins ,
com esse seu , eu fiz , e consegui de primeraa ;D
só to com uma duvida ,
eu segui o tuto , e deu tudo certo aque ,
só qe as imagens ficão no canto esqerdo ,
e eu qeria centraliza-las ,
eu tentei aki os códigos q eu conheço ,
e não consegui , qebrei a cabeça e nadaa =/
se tu puder ajudar , eu agradeço brother !
abraçoos ‘
Use CSS para centralizar tudo, tipo, define uma div geral e coloca no id dela width: 800px; margin: 0 auto; Isso vai centralizar ela, ai coloca a galeria do slideshow dentro desta div geral.
@RafaelVaz, se você puder coloca seu arquivo online para que eu possa ver o código e tentar te ajudar.
Olá Leo Baiano. Eu estou com um probleminha: a galeria pegou direitinho, porém, se eu colocar outra galeria dessa mesma ele dá erro, ficando uma galeria com as imagens das duas, só que só aparecem as fotos da primeira colocada.
Como resolvo isso? Aguardo resposta. Obrigado pela atenção e pelo tutorial!
Para a segunda galeria você vai precisar criar outra chamada do script e alterar o ID do container, no meu exemplo esta #galeria mude para #galeria2 em uma das galerias e volta aqui pra dizer o resultado.
cara sabe o que e salvar a vida de alguem ! voce me ajudou muito cara valeu, bom saber que ainda existem pessoas que queiram compartilhar o que sabem com os outros !
Muito bom cara, tem um efeito semelhante ao com podemos conseguir usando flash mas um peso bem menor, entretanto é compatível com o IE 6? porgunto pois é notório os varios “problemas” desse navegador com as css e javascript tbm…
Abralos