Legion Designers
SlideShow Simples com Jquery e Cycle Pop-bemvindo
Legion Designers
SlideShow Simples com Jquery e Cycle Pop-bemvindo
Legion Designers


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

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

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

Switch

Switch
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.

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

Gipinho™

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

http://www.maxdesign.forumais.com

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

Permissões neste sub-fórum
Não podes responder a tópicos