Criando um SlideShow o Cycle
Devido ao pedido do amigo Thiago Finardi vou fazer um post sobre o plugin do jQuery Cycle, mais para apresentar do que para explicar como ele funciona, pois como veremos ele é muito simples e prático.
Então o Cycle é um plugin para jQuery para utilizar o efeito de slideshow fornecendo uma série bem interessante de efeitos de troca. Parando com a enrolação vamos aos exemplos.
Primeiramente não se esqueça de inserir o arquivo javascript da jQuery e da Cycle que você baixa aqui que oferece dois arquivos. O normal com todos os efeitos o Lite com basicamente somente o efeito de fade(que convenhamos é o mais utilizado).
<script src="http://code.jquery.com/jquery-2.0.0.js"></script> <script src="http://malsup.github.io/jquery.cycle.all.js"></script> <script type="text/javascript" charset="utf-8"> $(document).ready(function(){ $('#fade').cycle(); }); </script> <div id="fade"> <img src="img/foto1.jpg"/> <img src="img/foto2.jpg"/> <img src="img/foto3.jpg"/> </div>
Como vemos nos códigos acima, o plugin adiciona o método cycle para ser adicionado a uma marcação de div
por exemplo que deverá conter dentro dele os elementos que irão ser trocados, no exemplo utilizamos elementos img
, mas pode ser utilizado outros elementos HTML.
Se não passarmos nenhum valor para o método cycle
ele utilizará o efeito fade
, se quisermos utilizar outro efeito basta passar o nome do efeito para a propriedade fx
como vemos no exemplo abaixo:
$('#slide').cycle({ fx: 'scrollDown' });
Segue a lista de efeitos disponíveis
- blindX (veja exemplo)
- blindY (veja exemplo)
- blindZ (veja exemplo)
- cover (veja exemplo)
- curtainX (veja exemplo)
- curtainY (veja exemplo)
- fade (veja exemplo)
- fadeZoom (veja exemplo)
- growX (veja exemplo)
- growY (veja exemplo)
- scrollUp (veja exemplo)
- scrollDown (veja exemplo)
- scrollLeft (veja exemplo)
- scrollRight (veja exemplo)
- scrollHorz (veja exemplo)
- scrollVert (veja exemplo)
- shuffle (veja exemplo)
- slideX (veja exemplo)
- slideY (veja exemplo)
- toss (veja exemplo)
- turnUp (veja exemplo)
- turnDown (veja exemplo)
- turnLeft (veja exemplo)
- turnRight (veja exemplo)
- uncover (veja exemplo)
- wipe(veja exemplo)
- zoom(veja exemplo)
Além da propriedade fx
, também podemos utilizar outras propriedades por exemplo:
- speed: define o numero de milissegundos que vai levar a transição para o próximo slide
- timeout: especifica quantos milissegundos levará para iniciar o próxima transição
- prev: recebe o id do elemento que quando clicado irá ir para a imagem anterior
- next: recebe o id do elemento que quando clicado irá para a próxima image
$('#slide').cycle({ fx: 'scrollDown', speed: 300, timeout: 2000 prev: '#link_anterior' next: '#link_proximo' });
Mais propriedades podem ser vistas na página de opções.
Espero que gostem e utilizem!