Hoje vou mostrar um plugin Jquery para fazer slideShow, plugin chamado de jQuery Cycle Plugin.
Este plugin também facilita na personalização do seu slideShow, pois tem diversos efeitos.
Chama os javascripts
<script type='text/javascript' src='js/jquery.js'></script> <script type='text/javascript' src='js/jquery.cycle.js'></script>
Adicione esse javascript
Aqui estou escondendo todas as imagens dentro da div#cycle, e depois mostrando a primeira.
$(document).ready(function(){
$('#cycle img').hide();
$('#cycle img:first').show();
}HTML
<div id="cycle">
<img src="img/1.jpg" />
<img src="img/2.jpg" />
<img src="img/3.jpg" />
</div>Efeito: fade
$('#cycle').cycle({ fx: 'fade', speed: 300 });Efeito: shuffle
$('#cycle').cycle('shuffle');Efeito: slideX
$('#cycle').cycle('slideX');Efeito: growY
$('#cycle').cycle({ fx: 'growY', speed: 1000 });Efeito: blindY
$('#cycle').cycle('blindY');
Loading ...
#1 por Chris Benseler - 10 de julho de 2009 em 22:06
Mais um plugin pra lista! hehe
Estou acostumado a usar o jCaroussel…
[]s!
#2 por Newcos - 30 de julho de 2009 em 22:06
O plugin cycle do jQuery é excelente, mas gostaria de saber como posso adicionar uma legenda nas imagens e continuar rotacionando? Pois na verdade eu precisaria de algo como:
div id=”cycle”
ul
li img src= img/1.jpg /> p class=”legenda” legenda da img 1 /p /li
li img src= img/2.jpg /> p class=”legenda” legenda da img 2 /p /li
li img src= img/3.jpg /> p class=”legenda” legenda da img 3 /p /li
/ul
/div
Daí ele deveria rotacionar o que está dentro do (li) e ir passando de um para o outro, alternando a imagem com sua respectiva legenda.
Poderia mostrar como fazer isso?
Obrigado e parabéns pelo seu excelente blog e principalmente por esse post.
#3 por Danilo - 31 de julho de 2009 em 15:12
Boa tarde brother,
Você vai conseguir inserir a legenda nas imagem com CSS fazendo o seguinte:
- Primeiro vai ter que deixar a div.cycle ul li relative “position: relative;”
- Depois deixe a tag p absoluta à li com “position: absolute;”
- Depois ajusta ela assim: “bottom: 10px; width: 100%; backgound: red;” que a tag p vai aparecer absoluta em relação a tag li
Creio que funcione assim, não testei mas faça o teste e posta ae pra gente se deu certo.
Abraço,
Qualquer dúvida, tamo ae pra somar!
Valeu pelo Elogio ao blog rapá.
#4 por Newcos - 1 de agosto de 2009 em 01:49
Obrigado pela resposta Danilo. Sinto muito, mas seu modelo não funcionou.
Entretanto, encontrei a solução perfeita, que permite até rotacionar o conteúdo inteiro dentro de uma div, vide esse post (o último tópico é a solução):
http://www.nabble.com/jQuery-Cycle-pagerAnchorBuilder-with-Div-Tags-td20023944s27240.html
Obs.: O html está no primeiro post, só repetir várias vezes a div “headline-item” para testar o modelo de rotacionar.
Já testei e funcionou em todos os navegadores. Você poderia traduzi-la e publicar aqui no blog, como complemento desse post. Tenho certeza que muitos vão buscar por isso.
Obrigado.
#5 por Danilo - 1 de agosto de 2009 em 11:33
Dae,
O exemplo que postei funcionaria igual a este.
Tanto faz se está feito com div’s ou ul e li…
Para colocar o título vc só usaria CSS.
Abraço…
#6 por José Luiz Gabriel - 1 de agosto de 2009 em 20:59
Testei aqui com título, com as coordenadas que você passou ao Newcos..
Funcionou certinho..!!
Valeus!!
#7 por Ricardo Soares de Lima - 29 de setembro de 2009 em 18:18
Olá! Estou usando este plugin mas estou tendo um problema com as divs que contém as imagens. Tenho uma div com o feito do plugin e logo após esta div tenho outra div sem o efeito do plugin. Acontece que a div com efeito esta sobrepondo a dive sem efeito. Posso ver a div sem efeito durante a transição das imagens. Alguém saberia como resolver isso?
Obrigado.
#8 por Marcio - 9 de outubro de 2009 em 14:55
Ola Danilo,
parabens pelo Blog e pelo post!
Realmente o plugin Cycle é excelente.
Tenho somente uma dificuldade, se utilizar o plugin Cycle com uma ancora no firefox não rola o slideshow.
Sabe me dizer o motivo ou uma fonte para pesquisar?
Muito obrigado.
#9 por Guttemberg - 11 de dezembro de 2009 em 09:59
Muito bom artigo!
Mas gostaria de alterar o tempo de intervalo entre um fade e outro. Sei como alterar o tempo do fade, mas ocorre que entre uma imagem e outra, a passagem está muito rápida. Quando ela termina de carregar, não dá nem tempo de ler o conteúdo da imagem e ela já vai esmaecendo e partindo par outra.
Alguém sabe como aumentar este tempo entre um fade e outro?
Abçs