Criando slideshow de fotos e notícias com jQuery e jCycle

Aviso importante!

Eu sei que você não quer ver propagandas, porém o conteúdo gratuito só está aqui graças a publicidade. Considere desativar o AdBlock para esse site.

Aprenda a criar facilmente uma galeria de fotos e paginação de noticias com o plugin Jcycle. Esta galeria é muito semelhante ao sistema de banners em slide que disponibilizamos para download aqui no blog. Este sistema é de fácil implementação em qualquer site ou até mesmo em blogs com WordPress.

Confira todo procedimento nas duas aulas a seguir e não deixe de comentar sobre a mesma.


(function($){
	$(document).ready(function() {
		// Cria uma div.paginas que receber os paginadores
		var div = $('
').addClass('paginas');
		// Insere a div criada antes da lista de fotos
		$('#fotos ul').before(div);
		// roda o jcycle na ul dentro da div fotos
		$('#fotos ul').cycle({
			pager: 'div.paginas', // paginao
			pause: true, // pausa ao deixar o mouse sobre a imagens
			pauseOnPagerHover: true, // pausa ao deixar o mouse sobre a paginao
			fx:     'fade',
			speed:  2000,
			timeout: 5000,
			// Executa uma funo antes de cada troca de slide
			before: function(atual, proximo, opcoes, avancando) {
				 // Esconde o pargrafo e a div.barra_semi-transparente que esto no slide atual
				$('p, div.barra_semi-transparente', atual).slideUp('fast');
			},
			// Executa uma funo depois de cada troca de slide
			after: function(atual, proximo, opcoes, avancando) {

				// mostra o pargrafo e a div.barra_semi-transparente do slide atual
				$('p, div.barra_semi-transparente', proximo).slideDown('fast');
			}
		});
	});
})

Sobre o autor

Roberto Pereira

Sou desenvolvedor web, amante de tecnologia, gosto de disseminar conhecimento através de vídeo aulas e artigos.

Comentários

Atualmente temos 46 comentários para este post. Participe você também, clique aqui e comente sobre o assunto.

  • Robert Ribeiro dos Santos comentou em

    Olá amigo boa noite, muito obrigado me ajudou muito. Mas só estou com um probleminha, saiu corretamente igual ao seu mas o Link (que é a descrição da imagem) saiu em baixo da imagem. deu esse erro no meu revisei varias vezes mas msm assim não encontrei o erro, por gentileza poderia me ajudar ?

    Responder
  • jean geraldo comentou em

    olá parabéns pelas video aulas estou aprendendo essas linguagens a pouco tempo e vc me tiou muitas duvidas q tinha obrigado aqui tentei fazer esse slide e n consegui n sei se errei no s codigos o q foi me ajude por favor me passa seu msn

    Responder
  • Fábio Santos comentou em

    Me ajudou muito, depois de inúmeras horas à procura de um Script que realmente funcionasse! Aff!
    Obrigado a Equipe da RBTech

    Responder
  • Flávio Morando comentou em

    Boa noite
    o Sr. poderia me mandar os códigos fonte, pois nao da para ver muito bem.

    E parabéns pela vídeo aula muito boa.

    Responder
  • ROCHAJL comentou em

    Olá. Parabéns pelo site, sempre com excelentes vídeos.
    Tenho um dúvida meio que relacionada ao assunto. Caso possa ajudar, agradeço.
    Há como dinamicamente alterar o valor do TIMEOUT?
    Tenho uma rotina que traz imagens para uma DIV utilizando jQuery e jCycle, só que em certo momento eu também trago um arquivo flv. Consegui pegar o tempo deste arquivo. O que preciso é mudar o valor do TIMEOUT quando a função passar pela DIV para que a apresentação passe em sua totalidade e depois volte para seu valor padrao. Basicamente é isso. Grato pela atenção.

    Responder
  • Yargo Valério comentou em

    Muito boa a vídeo aula, eu consegui implementar no site que estou desenvolvendo, porém surgiu um problema, sou bolsista na UFRN, e me a idéia para o novo site que tenho que fazer, é colocar esse slideshow dentro de uma moldura, até ai tudo bem, mas quando eu coloco a moldura e deixo tudo ajustado, os botões para passar os slides não podem mais ser clicados, ja tentei usar 'z-index' para corrigir esse problema, mas não consegui fazer os botões voltarem a ser clicáveis, queria saber como resolver esse problema.
    A moldura esta em uma div que coloquei antes da ' div id="geral" ' que fiz de acordo com o seu vídeo.

    Responder
  • marcelo comentou em

    nao sei por que a mensagem que lhe enviei nao completa
    mas me passe te e mail para te passar o codigo inteiro

    Responder
    • A mensagem que você enviou não completa porque você simplesmente não leu a regra para comentários e não postou o código fonte como deve ser postado, portando o mesmo sempre será excluído de seu comentário.

      Sobre seu erro, o exemplo criado na aula funciona perfeitamente, então sugiro que você faça igual ao da aula e vá mudando uma coisa por vez até descobrir o que está errado em seu código.

      Responder
  • marcelo comentou em

    olha amigo ja to cansado te tanto procurar o problema para meu codigo saber por que ele nao funciona espero que vc ossa me ajudar

    para mim este codigo esta certo mas nao funciona de jeito nenhum ja troquei de pluguins varias vezez troquei os codigos por exeplos parecidos mas nada da certo

    espero mesmo que me ajude!!vou lhe enviar o codigo atual que tambem nao funciona:

    Responder
  • Alessandro comentou em

    Parabéns pelos vídeos irmão,
    tens ajudado muita gente, se possível
    me passa os códigos por email.

    Responder
  • carlos fernando comentou em

    como eu coloco ele no wordpres o codigo ?
    pondo o loop nele igual faz normalmente igual conteudo destaque?

    Responder
  • Luitame de Oliveira comentou em

    Eu fiz esse sistema ai de slide, só que a minha barra semi-transparente ficou alternando. Horas em cima e outra em baixo. Por favor, socorro!

    Responder
    • valdoir comentou em

      Ola tudo bem...

      to com o mesmo problema, caso ja tenha conseguido corrigir por favor me orienta oque devo fazer.

      Responder
  • Use o Jquery e cycle numa das páginas do meu site porém o slide só funciona localmente, quando o faço o upload para o servidor o mesmo fica estático com fotos enfileiradas. O que pode ter ocorrido?
    Agradecendo antecipadamente

    Responder
  • Rafael comentou em

    Não to conseguindo fazer a 2ª parte, a que cria um novo documento(fotos) la na pasta script... ai já não consigo fazer essa parte não da certo... na hora que eu vou da um preview ele não fica igual ao que está no vídeo... acho que é porque eu não coloquei nada só copiei o que tava no vídeo... se você puder me me ajudar agradeço, mas desde já está de parabéns com a vídeo aula!

    Responder
  • HELISSON SILVA comentou em

    Fiz da forma que vc ensinou e ficou ótimo. Mto obrigado!

    Mas como sou meio iniciante, não consegui resolver um problema: meu menu que era drop down ficou por baixo do slideshow de noticias. Como eu coloco ele acima das noticias?

    Vc pode visualizar melhor no endereço do site que preenchi no campo.

    Obrigado.

    Responder
    • HELISSON SILVA comentou em

      Ah sim. Quebrei a cabeça e descobri. Era só colocar z-index: 100, no menu e z-index:99, no slideshow.

      Obrigado. ;)

      Responder
  • Erivan Vieira comentou em

    Olá amigo até consegui, mas tenho outro problema, consegui salvar e funcionou em php inserir com include na pagina, está funcionando tudo dinamicamente, o problema é que tenho uma div especificamente para o include só que ela fica com uma margem de mais ou menos 50 px a esquerda , já esplorei bastante o css e não centralizou dentro da div gostaria de saber tem alguma solução? veja o exemplo do deslocamento da div: como http://erivanvieira.com/deslocada_div.JPG

    Responder
  • ERIVAN VINEIRA comentou em

    Olh eu nem fiz seguindo a video aula, eu já baixei os arquivos prontos que vc postou ai para um colega, descompactei na raiz do site e salvei como php , mas não aparece nada no navegador, estou com um projeto aqui já pronto e queria inserir este como include, em uma pagina para postar as iformaçoes da base de dados
    Amigo faz o seguinte me posta este arquivo já salvo em php, mas antes testa para ve se está funcionado, desde de sedo que teento e naõ dar ceerto

    Responder
  • Erivan Vieira comentou em

    Olha amigo fazia muito tempo que queria um slide exatamente assim e já tinha pesqusado muito, e não havia encontraddo , até que achei este seu tutorial, que era exatamente asim,mas no meu caso aqui não está dando certo, pois preciso usar dinâmicamente, então preciso salvar em php, mas quando salvo em php não funciona, so aparece os títulos, se tiver alguma solução, agradeço, pois seria muito útil em meus projetos

    Responder
  • Augusto comentou em

    oiiee akguem que tenha feito este slide pode me ajudar?? eu fiz conforme demosntração e ele funciona pereitamente na pagina criada, porém nao consigo colocar na minha home, preciso de orientação para saber quais passos faço, ja que minha pagina foi criada em front page e html somente...ajudemmm please

    Responder
      • Augusto comentou em

        oi, obrigado pela atenção, então, eu chamei os scripts mas nao to conseguindo...onde será que estou errando?

        Responder
        • Essa pergunta é você mesmo que precisa responder, é como eu disse para o outro colega, você precisa adaptar o exemplo usando lógica, na internet não é só CTRL + C e CTRL + V que resolve as coisas. Se não está funcionando é porque algum passo não foi seguido, configura seus códigos para localizar o erro que impede o funcionamento do slide.

          Responder
  • Augusto comentou em

    oi..copiei seu codigo e alterie imagens e links para meu objetivo, deu certo, quando clico na index que alterei o nome para destaques ela me mostra o slide...mas e agora como coloco isso no meu site? eu fiz ele em front page, esta pasta de destaqeus coloco ela toda em ww root ou nao?? to perdido me ajuda ai! rsrssr abçs

    Responder
  • Lucas Figueredo comentou em

    Cara consegue para mim um sistema em php para votação tipo sim ou não, pq eu quero colocar uma brincadeira em meu site em que a pessoa tem que votar na foto da gata tipo assim...

    EX:

    (aqui fica a foto) ai abaixo da foto vem a opção.
    Pego | Passo em que a pessoa vota, e na hora dá o resultado!

    se você conseguir farei um merchansing muito massa de seu blog em meu site, vlw abraço.

    Responder
    • antonio carlos comentou em

      olá roberto, gostei da video aula, muito boa, sera que voce poderia disponibilizar o código fonte fazendo um grande favor, o link do 4 shared nao está funcionando mais, obrigdo fico no aguardo.

      Responder
  • Jorge comentou em

    Valeu excelente video aula.

    Mais o plaguin do jcycle, não funcionou. Não sei onde errei.

    Pode ser no CSS, será que poderia me mandar os codigos.

    Desde ja agradeço.

    Um abraço

    Responder
  • Airton lopes comentou em

    Olá Roberto é eu de novo. Consegui resolver meu problema Parceiro. Quando relatei antes eu esqueci de falar que eu estava utilizando o WordPress em localhost e que só depois iria hospedar.
    Como falei, o meu problema era que eu não estava conseguindo rodar o jcycler no meu WordPress. E o problema era simples cara, quando eu dava a chamada dos scripts no header eu não me liguei que o caminho para o arquivo deveria conter
    " pra poder pegar o endereço certinho.
    <script type="text/javascript" src="/scripts/jquery.js">

    Então fiz a chamada dos três arquivos da forma correta e não deu outra funcionou beleza. adequei o css pra página e ta tudo formatadinho, tudo sendo puxando do banco de dados e alterando dinamicamente show de bola.

    De qualquer forma eu não sabia desses detalhes que você falou que poderia ser o problema e vou ficar atento quando eu levar pro servidor(que não será gratuito, é um servidor pago) . E o Site também não é .com é .net estou desenvolvendo para um professor meu da minha ex-escola. É um site de um grupo interdisciplinar.
    espero que não tenha muitos problemas quando eu for hospedar.

    E é isso aí Roberto sua vídeo aula foi tudo de bom. Pude deixar a home do site mais linda com esse sistema de notícias. Obrigadão mesmo parceiro.
    qualquer problema estarei pedindo sua ajuda! mais uma vez parabéns.

    abraços

    Responder
  • Roberto Pereira comentou em

    Fala Airton tudo bem contigo,

    A instalação do slide show, pode ser feita de 2 formas, enviando por FTP
    para o seu servidor ou instalando diretamente no painel do WordPress,
    através do gerenciador de plugins próprio da plataforma.

    O WordPress instalou o plugin SlideShow ?
    Se o seu WordPress for [ .COM] , ele não permitirá instalar plugins,
    somente ativar os que já estão disponíveis na própria plataforma.

    Várias coisas podem causar isso, em hospedagem gratuitas este recurso costuma não funcionar, pode ser também que a biblioteca do jquery esteja entrando em conflito, com um outro plugin, prá gente saber qual delas no seu caso, post aqui na rbtech ou me mande o seu link, por favor.

    Responder
  • Airton lopes comentou em

    Olá Roberto, essa vídeo aula é show, gostei muito. Mas gostaria que você me tirasse uma dúvida:
    eu fiz todo os procedimentos junto com você e tudo funcionou perfeitamente. Mas quando tentei levar esse slide show pro site q estou desenvolvendo na plataforma WordPress eu não consegui fazer funcionar. Penso que estou fazendo o certo, mas não funciona. Eu trago as imagens através de campos personalizados e os títulos também. Na The loop peço pra mostrar 5 , li, e mostra as imagens tudo formatadinha com seus respectivos títulos tudo direitinho, mas o slide show não roda. eu coloquei os scripts para serem chamados no header.php que é pego na index pelo WordPress e não entendo porque não roda. Será que você poderia fazer uma outra vídeo-aula ensinando a fazer esse procedimento? gostei muito desse slide de notícias e quero levar pro meu site em WordPress.
    agradeço pela atenção e estou aguardando.
    abraços

    Responder
  • Roberto comentou em

    Grande Aldy Salvino,
    Já mandei no seu email os códigos.
    Qualquer dúvida, deixa mensagem aqui na Rbtech!
    Apareça mais vezes.
    Abraço!

    Responder
  • Wagner Gilberto comentou em

    Ja baixei as vídeo aulas, mas tava fechado pra comentarios, mas uma vez parabens pelas aulas

    Responder

Deixe seu comentário