Olá amigos,
já faz um tempo que não posto nada aqui, bem, resolvi reativar o blog passando algumas dicas e tutoriais bem simples e de fácil implementação e modificação.
Hoje vou mostrar um efeito muito legal em jQuery, muito utilizado em Slideshows e galeria de imagens, é a transição com o plugin Cycle.
vamos lá
Primeiramente vamos acrescentar em nosso código a biblioteca jQuery, adicione a seguinte linha acima da tag no topo da página:
1 | <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" ></script> |
Abaixo dele vamos acrescentar o plugin cycle, você pode fazer o download dele clicando aqui
2 | <script type="text/javascript" src="../../js/cycle.js" ></script> |
Agora vamos montar nossa lista de imagens a serem exibidas conforme o código abaixo:
1 2 3 4 5 | <ul id="roda"> <li><img src="01.jpg" alt="" /></li> <li><img src="02.jpg" alt="" /></li> <li><img src="03.jpg" alt="" /></li> </ul> |
Eu dei uma identificação “roda” para a lista, isso é importante para o código jQuery identificar onde será realizado o efeito.
Agora vamos completar nosso código com o jQuery. Na parte de cima da página, logo abaixo do plugin cycle, entre com o seguinte código:
3 4 5 6 7 8 | <script type="text/javascript"> $(document).ready(function() { $('ul#roda').cycle({ }); }); </script> |
Esse código é o que vai fazer a transição de imagens acontecer.
O plugin cycle permite alguns efeitos diferentes, você pode incrementar o código para conseguir novas formas de transições e velocidade das mesmas.
Em um exemplo pratico e rápido, eu inclui apenas 2 linhas ao código, substitua o codigo acima por este:
3 4 5 6 7 8 9 10 | <script type="text/javascript"> $(document).ready(function() { $('ul#roda').cycle({ fx:'shuffle', speed: 1000 }); }); </script> |
Aqui eu acrescentei 2 linhas, a linha “fx:’shuffle’” que muda o efeito de transição das imagens e a linha “speed:1000″ que muda a velocidade desta transição.
Eu disponibilizei um exemplo do efeito aqui
Para saber mais sobre este plugin, acesse o site oficial aqui
Qualquer dúvida é só deixar um comentário abaixo, ok?
Um abraço a todos.
Nenhum post relacionado.
8 Responses to “Transição de imagens com Cycle jQuery”
Estava buscando uma alternativa ao Flash em transição de fotos, seu post me salvou… valeu!!!
Cara, muito bom esse plugin, porém eu estou tendo um problema de compatibilidade no IE.
Será que poderia me dar uma mão?
Pode ver em: opticamundial.com.br – No Chrome ou Firefox ta tranquilo, estou tendo problema no IE pra variar, parece que não está conseguindo executar o plugin.
Ps. acabei de notar que o meu scriptaculous (rotacionar imagens do banner maior) não está funcionando depois que coloquei o script do cycle.
Muito obrigado pela atenção!
Abraços.
Agora que aparentemente consegui fazer funcionar em todos os navegadores o cycle, o scriptaculous (que utilizo para rotacionar imagens do banner maior) não está funcionando. Será que há alguma incompatibilidade ou conflito com esses scripts?
obrigado!
Você deve pensar: ESSE CARA É MTO CHATO! hauahuahua, mas acabei de descobrir o problema… se coloco o link pro jquery-1.4.2.min.js simplesmente os outros scripts param de funcionar. Creio que agora fique mais fácil de conseguir ajuda.
Muito obrigado mais uma vez!
Olá, estou com um problema parecido com o do victor pientka.
quando coloco o js do cycle os outros js param de funcionar.
tem como resolver isso.
agradeço deste já.
Galera se vcs forem usar varios JS na mesma pagina, vcs vão ter que colocar no mesmo arquivos JS. não se pode usar lightbox e esse efeito ao mesmo tempo!
estou desenvolvendo um sitio e ao utilizar o cycle na pagina inicial aparece todas as imagens rodar o efeito… no entanto ao navegar pelo firefox e crome as imagens aparecem normalmente. o que devo fazer?
Posta o endereço do site que vc esta tentando colocar o efeito.