Jean Carlos Cunha

.:: Diferente e eficiente::.

galeria slideshow, criar galeria slideshow, como criar com jquery e galeria slideshow

Bom pessoal aqui vai o post sobre a tao pedida galeria slideshow.

Baixa.

1.Última versão do jQuery: http://jquery.com/ – Clique no botão Download ( jQuery );
2.Ú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:

view sourceprint?
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:

view sourceprint?
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:

view sourceprint?
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

Uma resposta para “galeria slideshow, criar galeria slideshow, como criar com jquery e galeria slideshow

  1. Pingback: windows 7, hackers pirateiam windows 7, windows 7 e microsoft « Jean Carlos Cunha

Deixe uma resposta

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s

%d blogueiros gostam disto: