Pesquisa no site
Itens ativos
Posts mais lidos hoje
Login do usuário
Assine o RSS do Drupal-BR
Como criar um destaque rotativo em XHTML+CSS com link (Innerfade)
A um tempo atrás eu estava com uma dúvida: como criar um destaque de imagem rotativo que tivesse um link, mas sem uso de texto? Encontrei alguns módulos para Drupal, mas sempre eles esbarravam em alguma coisa que não me agradava. Muitos eram em Flash e minha preferência era usar XHTML+CSS.
Eis que encontrei uma forma um pouco mais "manual" de fazer a coisa, e resolvi compartilhar aqui com a comunidade minha descoberta.
O principal deste tutorial é o InnerFade, descobri que já tem pessoas trabalhando num possível módulo, mas enquanto não está pronto, esse tutorial irá ajudar.
Componentes utilizados:
- JQuery (nativo do Drupal, não precisa instalar nada)
- Plugin Innerfade para JQuery
- Módulo Content Template
- Módulo Views
- Módulo CCK (Content Construction Kit)
Instruções:
- Instale todos os módulos indicados. Content Template, Views e CCK.
- Crie um novo tipo de conteúdo, eu chamei de Destaque. Habilite o upload de imagens nesse tipo de conteúdo.
- Adicione um campo de link ao tipo de conteúdo Destaque e selecione os tipos de conteúdo que deseja linkar neste destaque.
- Em Views crie um bloco baseado em teaser filtrado por tipo de conteúdo Destaque e pela condição de frontpage, em seguida ordene por ordem de cadastro decrescente.
-
Através do content template faça um template de teaser que mostre apenas o link e a imagem cadastrada. Ex:
<a href="/node/<?php print $node->field_link_0[0]['nid'] ?>"><img src="/<?php print $node->field_destaque[0]['filepath'] ?>"></a> - Vá em blocos e selecione a área onde o bloco será mostrado, configure também em quais páginas o bloco será mostrado.
-
Baixe o Innerfade (http://medienfreunde.com/lab/innerfade/) e coloque o jquery.innerfade.js dentro da pasta /sites/all/themes//includes/ (Drupal 5.x).
No template onde deseja carregar o Innerfade, dê um include do script utilizando o formato padrão dentro da tag :<script src="/sites/all/themes/<seutema>/includes/jquery.innerfade.js" type="text/javascript"></script> -
Adicione o código (note que a classe de CSS .view-content-Destaque pode variar dependendo do nome criado para o tipo de conteúdo no Drupal. Para conferir o nome correto vá no código fonte gerado pela página desejada e pegue a classe):
<script type="text/javascript">
$(document).ready
function(){
$('.view-content-Destaque').innerfade({
speed: 1000, // Tempo de transição
timeout: 20000, // Tempo de exposição de cada imagem
type: 'sequence', // Tipo de animação
containerheight: '180px' // Altura em pixels do destaque
});
});
</script>
Obs: Não tive tempo o bastante para detalhar o uso do módulo views, content template e CCK aqui, mas há diversos tutoriais na internet, se quiserem podem indicar aqui neste post para ajudar.
- Se logue ou se registre para poder enviar comentários
- 3743 leituras



Legal!
Tava precisando disso. Vou aplicar.
Abraço!
Abraço!
Leonardo Silva
Produtor Cultural
Desenvolvedor Web
MUITO BOM Cara...
Parabéns por deixar esta bela dica pra galera... com certeza será de grande utilidade para muita gente aqui!
vlw mesmo!
--
Pedro Faria de Miranda Pinto
http://www.eusouopedro.com
http://www.phpavancado.net
Bate Papo sobre Drupal? irc://irc.freenode.net/drupal-br
Koji,
Achei fantástica a possibilidade de fazer essa integração, parabens por ter desenvolvido essa técnica.
Mas estou com problemas.. pelo que eu reparei la no site com a documentação, para fazer esse rotativo é necessário que as imagens estejam dentro de ul e li... pelo Content template eu consigo colocar o li (porque ele será repetido), mas o ul não pode repetir.
Como vc fez pra não precisar utilizar o ul e li?
Se puder me ajudar agradeço.
Abraço!
---
Thiago Régis
Abraço!
Thiago Régis
Portfolio
Efeitos e Scripts
jQuery Brasil - Em breve
Koji,
Consegui resolver o problema, porém apenas criando um arquivo node-destaque.tpl.php para exibição do conteúdo. Pelo Content Template não deu certo. Meu arquivo ficou assim:
<a href="<?php print $node->field_link[0]['view']; ?>">
<img title="<?php print $node->field_imagem[0]['title']; ?>" alt="<?php print $node->field_imagem[0]['alt']; ?>" src="<?php print $node->field_imagem[0]['filepath'] ?>" />
</a>
</p>
Thiago Régis
Ainda estou aprendendo. Tenham paciencia comigo ^^
Abraço!
Thiago Régis
Portfolio
Efeitos e Scripts
jQuery Brasil - Em breve
mas será que é possível criar o campo de imagem e link direto no tipo de nó, por exemplo?
assim: eu acrescento esses campos nos tipos de nó que eu quero linkar ao destaque.
então quando eu publicar uma noticia por exemplo eu posso adicionar uma imagem e um link...e no bloco de destaque eu apenas chamo esses dois campos do nó...
---------------------
André Luiz de Noronha