1 SlideShow Simples com Jquery e Cycle Seg Abr 25, 2011 3:39 pm
Switch
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:
Em seguida, abaixo da tag que chama o jquery.js, vamos adicionar a tag que chama o cycle.js.
Agora, abaixo das tags que chamam o jquery.js e cycle.js vamos adicionar a função que faz o cycle funcionar. Veja:
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:
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:
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.
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.