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');
}
});
});
})
Sou desenvolvedor web, amante de tecnologia, gosto de disseminar conhecimento através de vídeo aulas e artigos.
Atualmente temos 46 comentários para este post. Participe você também, clique aqui e comente sobre o assunto.
Amigo Muito Bom!!!!
Poderia me passar o código fonte tbm?
Responderolá 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
ResponderGostaria dos códigos do exemplo, fiz mas minha barra não aparece.
ResponderMe ajudou muito, depois de inúmeras horas à procura de um Script que realmente funcionasse! Aff!
Obrigado a Equipe da RBTech
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.
ResponderBoa tarde! Muito boa a aula. Fiz tudo e funcionou perfeitamente. Muito obrigada!!
ResponderOlá. 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.
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.
muito boa as vídeo aulas não só estas mais sim toda do site!! valeu !!!
Respondernao sei por que a mensagem que lhe enviei nao completa
mas me passe te e mail para te passar o codigo inteiro
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.
Responderolha 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:
ResponderParabéns pelos vídeos irmão,
tens ajudado muita gente, se possível
me passa os códigos por email.
como eu coloco ele no wordpres o codigo ?
pondo o loop nele igual faz normalmente igual conteudo destaque?
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!
ResponderOla tudo bem...
to com o mesmo problema, caso ja tenha conseguido corrigir por favor me orienta oque devo fazer.
ResponderUse 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
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!
ResponderFiz 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.
ResponderAh sim. Quebrei a cabeça e descobri. Era só colocar z-index: 100, no menu e z-index:99, no slideshow.
Obrigado. ;)
ResponderOlá 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
ResponderUse o Firebug para descobrir qual elemento está deformando seu layout, ficará mais simples corrigir usando ele.
ResponderOlh 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
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
ResponderProvavelmente você está esquecendo de algo no seu exemplo, procure empregar lógica ao exemplo criado para adaptá-lo conforme sua necessidade.
Responderoiiee 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
ResponderVocê precisa chamar os scripts necessários em sua home e implementar o restante das mudanças normalmente como você fez no exemplo criado.
Responderoi, obrigado pela atenção, então, eu chamei os scripts mas nao to conseguindo...onde será que estou errando?
ResponderEssa 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.
Responderok, obrigado pela atenção!
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
ResponderCara 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.
ResponderFala Jorge tudo bem contigo
estou enviando o codigo completo com as imagens, bons estudos.
http://www.4shared.com/file/_G13B_vS/Slideshow_de_fotos_e_notcias_c.html
Responderolá 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.
ResponderValeu 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
ResponderOlá 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
ResponderFala 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.
ResponderOlá 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
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!
poderia disponibilizar o código do exemplo? obrigado
ResponderJa baixei as vídeo aulas, mas tava fechado pra comentarios, mas uma vez parabens pelas aulas
ResponderGrande Wagner,
Obrigado pelo seu comentário, esta semana ja estarei enviando mais uma video-aula pro Rbtech; Segue o print :
http://img200.imageshack.us/img200/9964/criandojcarouselparaose.jpg
Atenciosamente roberto Pereira
ResponderOlá amigo,
Poderia me enviar os codigos também ?
Deis de já , obrigado.
Responder
© 2008-2023 - RBTech.info | Todos os direitos reservados | Hospedado por Innova Host
É proibida a reprodução total ou parcial de qualquer conteúdo deste site.
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 ?