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.
Boa 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.
como colocar isto no meu site? to iniciando em css agora :(
Como Faço Para Instalar no WordPress??
Grande Paulo, em resposta ao seu comentário acabei de postar um artigo especialmente com este assunto, espero estar esclarecendo sua dúvida e a de mais colegas...
Clique aqui para ver o post
@Crystian: você precisa usar a função query_posts do WordPress e fazer o select com os posts que você deseja mostrar no slide.
Tem uma vídeo aula aqui no blog sobre query_posts, clique aqui para ver.
@Crystian: os scripts devem ser incluidos no header.php do seu tema. E o CSS deve ser adicionado ao style.css do seu tema também.
@Aninha: Claro que tem, você pode usar qualquer efeito dos exemplos que tem no site do JCycle no slideshow, basta você alterar o arquivo destaques.js e mudar a linha fx: 'slideY' para o efeito que você quiser, por exemplo: fx: 'fade'
Primeiramente obrigado pelo comentário. Testei aqui com o teu CSS funcionou tudo certo no Firefox e no IE, não sei se você esqueceu de copiar no comentário ou se está faltando uma } no final do ultimo bloco de CSS. Sem esta } realmente não funciona corretamente, mas corrigindo isto funcionou perfeitamente.
Lecko Araujo removi o CSS do comentário para não ficar muito extenso. Fiz o teste e realmente no GoogleChrome acontece esse erro, testei várias alterações no CCS (usei também o CSS original) porém sem sucesso, creio que seja uma pequena incompatibilidade do navegador. Confesso que não sei como solucionar, deixo assim a questão em aberto para se alguem achar a solução que poste aqui para sabermos também.
Consegui solucionar somente o problema na tarja preta de fundo, porém o parágrafo continuou indo para cima. Na parte: #destaques ul li div.fundo troquei a position para relative e o bottom para 40px, isso resolveu o problema em parte. Faça alguns testes, pois quem sabe essa possa ser a solução.
valeu parceiro, agradeço pela atenção e pelo sistema tambem, apesar de n ser compativel com o navegador do google, mas funciona perfeitamente nos demais, e isso ja é muito bom
vou fazer meus testes, se obtiver resultado eu posto aqui
Brigado
Amigo, parabéns, ótimo artigo.
Porém, já mexi em tudo aqui, e não consigo solucionar o problema, notei que em seu site, não tem o bug, já temos uma solução?
Obrigado
Olá Isabel, obrigado pelo comentário e pelo link também, fico feliz em poder ajudar, volte sempre a nos visitar.
Obrigado pelo comentário Diego, mas me diga qual é o problema que ocorre em seu slide?
Primeiramente se a imagem não está aparecendo é porque seu PHP esta em outra pasta ou algo do tipo, verifique se não há necessidade de voltar diretórios na hora de chamar a imagem. Arrume a propriedade no teu CSS no local onde é chamada a imagem: images/faixa.png para o caminho correto.
Segundo, onde eu cito a alteração tem a linha onde deve ser adicionado o código para "arrumar" o empilhamento de imagens e não se trata de arrumar no dreamweaver mas sim no navegador quando o slide está sendo carregado. Esse código somente funiona no navegador pois no dreamweaver não é carregado o jquery.
Olá Ricardo, a estrutura da pasta permaneceu a mesma, a única coisa que tive que fazer foi realocar as imagens no dream porque ao adicionar o código elas ficaram off, também alterei o caminho no CSS do antigo "background: transparent url(../imagens/faixa.png)" para novo "background: transparent url(imagens/faixa.png)" e mesmo assim a imagem não aparece.
Quanto a outra dúvida do empilhamento das imagens, obrigado. Teria outra forma de deixar essas imagens sem que fiquem empilhadas?
Olha, confesso que não sei dizer o motivo da imagem não aparecer, envia os arquivos exatamente como estão para meu email (compactados por favor) e eu dou uma olhada.
Sobre o empilhamento: não conheço outra forma de fazer isso.
Altera a linha do onde tem o background do div faixa e remova a palavra transparent desta linha. Coloque também os ../ antes do caminho da pasta imagens, vai ficar algo do tipo:
background: url(../imagens/faixa.png) 0 0 no-repeat;
Olá Ricardo, cara mais uma vez obrigado pelo help, deu certo, agora a imagem esta aparecendo.
Essa aula já existe há um bom tempo: http://rbtech.info/inserir-miniaturas-nos-posts-e-banners-em-slide-no-wordpress/
Pode sim, basta usar a função do WP que chama o nome da categoria e inserir no lugar da paginação.
poxa, legal Ricardo..., então parece mesmo ser bem flexivel esse sistema na configuração. Só não consegui encontrar o local exato para inserir a função que chama a categoria....:, voce disse para substituir pela função da paginação? onde fica exatamente essa função? no arquivo javascript ou na index...?Não manjo muito e tentei apenas no arquivo php da index por enquanto e não obtive o resultado esperado. Vou consultar e pesquisar os arquivos javascript para ver se consigo encontrar a parte onde está a paginação. Se souber o local exato para eu substituir a função da paginação pela funçaõ das categorias ficaria muito grato, do que ja sou, pois o basico desse sistema já é muito bom e tem varias utilidades.
Valeu
Se não me falha a memória é no JS, mas você terá que colocar no HTML a chamada das categorias e tirar a geração de números da função JS, pois senão irá aparecer os números igual em seu slide.
Já está tudo em HTML, basta copiar e colar onde quiser.
Tira fora a div paginas que não haverá mais a paginação dos slides.
Remove a div paginas.
pra quem usa banco e quer fazer a contagem de impressao o codigo e esse pra pegar o valor do id no banco
lembrando que tem q imprimir o id ne cada li
var texto = ($('a.activeSlide').text());
if (texto=='')
{
texto='0';
}
else
{
texto = ((parseInt(texto))-1);
}
$('#publicidades ul li:eq('+texto+')').attr('id')
Primeiramente código fonte não pode ser postado aqui nos comentários, use o pastebin para isso.
Você pode integrar via arquivo externo já que está usando PHP ou então da maneira que é mostrado no exemplo.
Você precisa fazer dois loops diferentes, um para o slide e outro para o restante da página. Procure na documentação oficial do WP ou no Google mesmo sobre multiplos loops.
Nos comentários deste mesmo post se não me engano já há uma solução para este problema, dê uma conferida.
Oi, obrigado pela resposta.
Eu dei uma pesquisada e verifiquei a solução, porém não consegui ainda configurar. Pelo o que eu entendi tudo o que eu precisava fazer era adicionar o
antes do loop original do tema que eu uso. Mas não resolveu o problema.
Vou colar o código aqui, se você puder dar uma olhada e verificar onde eu estou errando eu agradeço muito.
<div id="content" role="main"> <?php if (is_home() && (strpos($_server['REQUEST_URI'], 'page') === false )){ ?> <div id="destaques"> <a class="faixa" href="#" title=""></a> <ul> <?php query_posts('showposts=5'); if (have_posts() ) : while (have_posts()): the_post(); ?> <li> <a href="<?php the_permalink() ?>" title="<?php the_title() ?>"><?php if (has_post_thumbnail()) the_post_thumbnail() ?></a> <div class="fundo"></div> <p><a href="<?php the_permalink() ?>" title="<?php the_title() ?>"><?php the_title() ?></a></p> </li> <?php endwhile; else: ?> <?php endif; ?> </ul> </div> <?php } ?> <?php rewind_posts(); ?> <?php if ( have_posts() ) : ?> <?php twentyeleven_content_nav( 'nav-above' ); ?> <?php /* Start the Loop */ ?> <?php while ( have_posts() ) : the_post(); ?> <?php get_template_part( 'content', get_post_format() ); ?> <?php endwhile; ?> <?php twentyeleven_content_nav( 'nav-below' ); ?> <?php else : ?> <article id="post-0" class="post no-results not-found"> <header class="entry-header"> <h1 class="entry-title"><?php _e( 'Nothing Found', 'twentyeleven' ); ?></h1> </header><!-- .entry-header --> <div class="entry-content"> <p><?php _e( 'Apologies, but no results were found for the requested archive. Perhaps searching will help find a related post.', 'twentyeleven' ); ?></p> <?php get_search_form(); ?> </div><!-- .entry-content --> </article><!-- #post-0 --> <?php endif; ?> </div><!-- #content --> </div><!-- #primary --> <?php get_sidebar(); ?> <?php get_footer(); ?>