Bom eu mal tinha terminado de colocar o sistema de destaques em slide na home do blog e já tinha gente me pedindo como fazia um sistema de banners em slide...
Atendendo aos pedidos, estou disponibilizando o código fonte dos slides para que todos possam usufruir deste benefício. O codigo está semi-comentado e é de fácil entendimento, quem tiver dúvidas deixe um comentário...
Você pode facilmente pegar as informações de um banco de dados para alimentar os slides ou até mesmo pegar os posts do blog como no meu caso. Veja na imagem abaixo uma prévia do sistema:
Baixar sistema de banners em slide
Editado em 17/02/2011:
Sugestão recebida por email do colega Irison:
Olá Ricardo, eu vi que no seu site quando acessa a página principal as imagens do cycle ficam empilhadas e só depois elas se ajustam, eu resolvi isso colocando um overflow:hidden; na div principal do cycle que no meu caso é a #destaques, não sei se já tentou corrigir ou se tentou algo e desajustou outras configurações, mas vendo o "erro" resolvi lhe informar uma possível solução caso se interesse.
Na verdade eu coloquei o overflow:hidden na seguinte parte do CSS:
#destaques ul, #destaques ul li, #destaques ul li img {overflow:hidden}Pois colocando na div principal (#destaques) não tive o resultado esperado.
Compartilhe esse post:
Sou técnico em hardware e desenvolvedor web, e sobre estes dois assuntos comecei a compartilhar aulas e artigos, tornando-me blogueiro em 2008. Em 2010 esse hobby virou profissão, e desde então tenho buscado melhorar e profissionalizar cada vez mais os projetos que mantenho na web.
Atualmente temos 60 comentários para este post. Participe você também, clique aqui e comente sobre o assunto.
Como Faço Para Instalar no WordPress??
Respondercomo colocar isto no meu site? to iniciando em css agora :(
ResponderBoa tarde,
Instalei esse plugin no blog do site da empresa onde trabalho. Funcionou perfeitamente, porém eu não consigo ver mais do que os 5 posts que são mostrados no slide.
Por favor, você sabe me dizer o que eu fiz errado?
Obrigado.
E S P E T A C U L A R ! ! !
Mto bom o script, simples, prático e bastante funcional.
Meus parabéns e principalmente meu MTO OBRIGADO!
Minha dúvida é a seguinte.
o código é colocado entre as tags
a pagina q estou desenvolvendo é em php. e a área está separada
do conteúdo. estou juntando pelo
entao ela fica bagunçada, tem alguma maneira de eu fazer sem colocar o na header ?
pois pelo que eu tentei colocar no não funcionou x:
obg
Olá, amigão inseri o slide tranquilo,porem eu uso um script lightbox em uma sidebar com fotos do site http://www.graciebarrams.com.br/ quando o eu coloco o script do banner fica o banner perfeito iguazinho o seu so que o lightbox do site não funnciona ele abre as fotos mas o efeito não acontece.
Ja tentei fazer as alterações mas não deu em nada, da um help ai!!!
Muito bom ajudou em meus estudos, agradeço muito o autor
Respondergostaria de fazer a contagem de impressoes pegando o id no li tem algum jeito
Respondercomo posso pegar o id das imagens para fazer uma contagem de impressão, seria uma boa, tentei no li mas nao sei pega-lo no jquery
ResponderComo faço para remover a contagem de números no canto superior direito? o.O
ResponderCara,
minha dúvida pode ser a mais noob, mas... Consegui fazer tudo, funcionando perfeito. Mas nao consigo tirar os números dos slides...
:(
ResponderCara! Show de Bola.
Fico feliz em ver que tem gente que dispõe de seu tempo muito precioso, para ajudar aqueles que precisam dessa luz. Valeu mesmo!
como aplicar este código em html? Obg
ResponderExcelente tutorial, funcionou perfeito.
Gostaria de saber se é possivel configurar pra aparecer as categorias em vez do numero de posts (1,2,3,4,5)? De qualquer forma vou tentando..., se conseguir eu posto um comentário com o codigo.
Valeu Ricardo, o video ficou otimo..., (estou tentando tambem implementar o outro sistema que vc postou o codigo recentemente vendo esse video..., to quase conseguindo..rs,qdo conseguir tbm posto aqui o codigo).
Brigadisssimo.
Abs
Meu Brother lhe peço até pelo amor de Deus, mostre como colocar esse sistema no wordpess?
de ah lhe agradeço....
a paz...
Cara, muito obrigado por disponibilizar esse sistema .. Para iniciantes isso ajuda muitoo ..
Obrigadoo .. Ótimo o Sistemaaa hehehe
Olá Ricardo, olha eu dinovo rsrrsrs,
Bom a minha volta se dá há uma pequena dúvida referente a uma das minhas perguntas acima, como as imagens ficam uma por cima da outra eu resolvi usar o recurso de iframe para puxar as imagens em uma pasta e assim eu consigo trabalhar no template do projeto sem ver as imagens da forma que ficam, até que deu certo em partes, eu até puxo as imagens da pasta usando o iframe sem problemas, porém estou enfrentando um pequeno problema quando ao posicionamento dentro do template e queria ver se é possível ajustar isso dentro do css do slideshow, e como eu sou meio cruzão nessa parte queria ver a sua opnião quanto a isso se seria ou não possível os ajustes que preciso fazer.
As imagens que estou usando tem o tamanho de 800x251 e para que elas possam ser vizualizadas pelo iframe sem cortes eu tenho que colocar um tamanho no código iframe de 820x260, mas com isso eu acabo perdendo o ajuste da tela do template e fica fora, aqui vc pode visualizar o que estou dizendo - http://www.engenhariabeta.com.br/site
O que poderia ajudar-me nessa questão ai?
Responderacho que consegui arrumar no google chrome... eu mexi algumas coisas mais acho q foi qdo mexi nesta linha:
#destaques{position: relative; width:100%; height:330px; padding:0; margin:0px 0px 0px 0px; float:left; background-color:#000; line-height:330px;}
adicionando o line-height:330px;
aqui ta rodando normal agora no chrome tbm.. abraco!
ResponderOlá meu caro Ricardo, primeiramente quero lhe dar os parabéns pelo post, realmente me salvou rsrsrs, estava me matando para criar um recurso em flash parecido porém sem sucesso, então resolvi usar o seu recurso e funcionou, mas a imagem "Destaque" que aparece no canto da imagem não quer aparecer depois que coloquei o código na minha página. Então vamos ao que fiz;
Primeiro eu alterei os links para as imagens que eu queria colocar, até ai tudo funcionou, localmente a imagem de destaque aparece, dai eu peguei os códigos e publiquei eles na página que eu quero ter o sistema rodando e simplesmente a imagem de destaque não aparece mais, a mesma encontra-se na pasta de imagens junto com as outras e só ela que não quer mais aparecer. A única coisa diferente que existe é que o sistema agora esta dentro deu uma página em PHP, mas creio que isso não tem nada a ver porque as demais aparecem.
Já olhei o código em busca de alguma coisa, mas como ainda sou iniciante no assunto não conseguir encontrar nada, por isso venho aqui pedir-lhe um HELP sobre o assunto, as imagens que alterei estão aqui nesse link - http://www.engenhariabeta.com.br/projeto/destaques/.
Outra coisa que também não conseguir fazer foi a alteração que voce sugere acima, eu não sei onde ou em que parte eu devo colocar o código citado, realmente fiquei perdido rsrsrs, queria sua ajuda quanto a isso.
E por último, quando visualizamos o recurso dentro do Dreamweaver vi que as imagens ficam uma por cima da outra (a solução acima diz respeito a isso?), dessa forma fica complicado de trabalhar porque o template fica cumprido devido a isso.
Fico no aguarde de suas respostas quanto as minhas dúvidas acima, e mais uma vez parabéns pelo post.
[]'s
Wesley Sampa
ResponderAssim como o outro sistema de banner postado aqui mesmo, este também é show de bola, obrigado por compartilhar esta ideia, parabéns.
ResponderMuito bom esse sistema de banner, ainda mais por que é uma ótima alternativa para quem não quer ou não sabe usar o Flash. Adorei! Tanto é que escrevi um breve post com o link para esta página, recomendando-o :)
Abraços,
Isabel
eu to usando o chrome vou esse css q mandei é so a parte que determina o funcionamento do texto do destaque, vou enviar o estilo completo pra vc ve se pode me ajudar
quando abro esta td ok, porem assim que o efeito de transição é aplicado, ele fica no topo da foto entende?
por favor me ajuda to precisando muito desse codigo
Responderamigo baixei testei funcionou tudo normal, você esta de parabéns a muito tempo procuro um sistema q funcione tão bem assim e corresponda minhas expectativas.
Mas a barra com o fundo e o texto do destaque, ta ficando no topo da imagem, assim que abro o arquivo fica tudo ok, porem depois que é aplicado o efeito, a barra com a legenda ou texto do destaque ta ficando logo abaixo da numeração dos destaques.
verifiquei o css e esta tudo ok
#destaques ul li div.fundo {
background-color: #000000;
background-position: ;
bottom: 0px;
filter: alpha(opacity = 80);
height: 40px;
left: 0px;
opacity: 0.8;
position: absolute;
width: 500px;
}
#destaques ul li p {
bottom: 0px;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 16px;
font-weight: bold;
left: 0px;
line-height: 20px;
margin: 0px;
padding: 10px 15px;
position: absolute;
width: 500px;
e como ja disse assim que abro o index que baixei aqui ele aparece tudo normal, mas depois do efeito de transição, ele não se posiciona corretamente
você pode me ajudar?
Responder@Fernando Moreira Costa e @Alessander Raker: obrigado pelos comentários.
ResponderAinda não fiz o meu blog mas percebi que suas dicas vão ser de grande ajuda para mim. Obrigado
ResponderBaixado, testado e aprovado!
Gostei muito, tah de parabéns! Vou usa-lo em meu site
Obrigado!
ResponderBaixando..
Irei testar..
ResponderOlá! Adorei essa idéia! Gostaria de saber se nao tem como mudar o efeito de troca de imagem pra fade.
Obrigada!
ResponderGrande Ricardo, funcionou muito bem, muito obrigado!!
ResponderSim, eu fiz o select com a query_post, certo, mas o slide não funciona, como faço para incluir os scripts no tema. Tem que incluir no header, no index?
ResponderBeleza, testei e deu certinho, mas como posso incluir este slide no wordpress?
ResponderGrande Ricardo !
Funcionou blz...grato!
ResponderRicardo!
Parabenizando vc mais uma vez por esta iniciativa em iluminar o caminho de muitos como eu que tem interesse em ingressar na área mas falta recursos para fazer um bom curso, quanto ao post Sistema de banners em slide com CSS e JCycle, fui um dos que entrou em contato contigo solicitando que vc explicasse como tinha implementado esse sistema em teu blog...botei pra funcionar ta tudo certinho...mas na hora de puxar as noticias do sistema wordpress...não dá...ilumina a gente ai como faz pra pegar as noticias do banco wordpress e coloca-las em forma de slides como no teu site/blog
Grato
Boma semana e sucesso pra vc!
© 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.
O que eu insiro no header.php do meu tema? O html? Do jeito que tá aí é só copiar e colar ou tem que alterar alguma coisa?