Legion Designers
Legion Designers


Você não está conectado. Conecte-se ou registre-se

Ver o tópico anterior Ver o tópico seguinte Ir em baixo  Mensagem [Página 1 de 1]

1 SlideShow Simples com Jquery e Cycle em Seg Abr 25, 2011 3:39 pm

Switch

avatar
Admin
Admin
Neste tutorial vou mostrar como criar um slideshow simples utilizando Jquery juntamente com o pluginpara criarmos um slideshow simples, porém bem legal de aplicar em seus trabalhos.

Veja um demo do que iremos fazer. Para isso clique aqui

Vamos ao tutorial!

Primeiro você deve ter o jquery na pasta onde você esta desenvolvendo o seu trabalho (ou então dentro de uma subpasta ou dentro de arquivo qualquer chamado por include). Para baixar o jquery acesse o site: jquery.com.

Segundo passo é baixar o plugin Cycle. Para isso acesse o site jquery.malsup.com, faça o download do plugin e coloque-o na pasta onde você está desenvolvendo seu trabalho.

Também baixei 5 imagens que irei utilizar no tutorial. Agora crie um documento html, salve-o e dê um nome a ele. Abaixo da tag title adicione a tag que chamará o jquery.js. veja:
Código:
<script type="text/javascript" src="jquery.js"></script>


Em seguida, abaixo da tag que chama o jquery.js, vamos adicionar a tag que chama o cycle.js.
Código:
<script type="text/javascript" src="cycle.js"></script>


Agora, abaixo das tags que chamam o jquery.js e cycle.js vamos adicionar a função que faz o cycle funcionar. Veja:
Código:
<script type="text/javascript">
$(document).ready(function() {
    $('#slideshow').cycle({
        fx: 'fade'
    });
});
</script>


O ID #slideshow fica o bloco onde conterá as imagens que irão compor o nosso slideshow. Nesse casso, podemos adicionar o id #slideshow em uma DIV. É exatamente isso que iremos fazer. Veja:
Código:
<div id="slideshow">
</div>


Como você pode imaginar, essa ID pode ser formatada em CSS. Essa parte é com você. Então, vamos adicionar as imagens dentro da div que criamos. Veja:
Código:
<div id="slideshow">
<img src="imagens/01.jpg" alt="" />
<img src="imagens/02.jpg" alt="" />
<img src="imagens/03.jpg" alt="" />
<img src="imagens/04.jpg" alt="" />
<img src="imagens/05.jpg" alt="" />
</div>


Só isso. Simples, não é mesmo? Agora é so estilizar seu slideshow com css. O uso basicamente do Cycle é assim, se você quiser você pode procurar aprender mais sobre este plugin, pois tem várias outras formas de personalizar o seu slideshow.


••• Assinatura de Switch •••


_______________________________________________________
Tah vendo meu post neh Convidado

Gift do Junin Dsg kkkkk' vlw mano Very Happy



Ver perfil do usuário

2 Re: SlideShow Simples com Jquery e Cycle em Seg Abr 25, 2011 8:30 pm

Gipinho™

avatar
Membro Médio-Avançado
Membro Médio-Avançado
Vlw por Partilhar ai xD

Ver perfil do usuário http://www.maxdesign.forumais.com

Ver o tópico anterior Ver o tópico seguinte Voltar ao Topo  Mensagem [Página 1 de 1]

Permissão deste fórum:
Você não pode responder aos tópicos neste fórum