• Cadastro
  • Fóruns
  • Manual
  • Projetos
  • Seminário
  • Tradução
  • Tutoriais
Início

Pesquisa no site

Google

Treinamento Drupal 25 de Abril de 2009 em São Paulo

Itens ativos

  • Simplenews + CCK possível?
  • Popup abrindo um player com uso de views
  • Comentarios não aparecem
  • Criar uma Busca Personalizada
  • mudar id botão submit webform
  • Limitar upload de áudio
  • Filtros por termos de vocabularios diferentes
  • Tutorial sobre criação de temas no Drupal 6
  • Video
  • Melhor módulo para Blogroll
more

Posts mais lidos hoje

  • Correios (Sedex, Malote, PAC) para e-Commerce
  • Jogos de Meninas
  • Tutoriais
  • Sites de cantoras
  • Manual
  • Tutorial sobre criação de temas no Drupal 6
  • Módulo de calculo de frete dos correios
  • Popup abrindo um player com uso de views
  • mudar id botão submit webform
  • Criar uma Busca Personalizada

Login do usuário

  • Criar uma conta
  • Recuperar senha

Assine o RSS do Drupal-BR

RSS dos itens mais ativos

RSS do conteúdo

RSS dos comentários

Início » Fórum » Suporte » Drupal

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:

  1. Instale todos os módulos indicados. Content Template, Views e CCK.
  2. Crie um novo tipo de conteúdo, eu chamei de Destaque. Habilite o upload de imagens nesse tipo de conteúdo.
  3. Adicione um campo de link ao tipo de conteúdo Destaque e selecione os tipos de conteúdo que deseja linkar neste destaque.
  4. 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.
  5. 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>
  6. Vá em blocos e selecione a área onde o bloco será mostrado, configure também em quais páginas o bloco será mostrado.
  7. 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>
  8. 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.

Demo do innerfade

‹ Load elevadíssimo Mais sobre load e blobs... sorte a minha!!! ›
Enviado por kojieumesmo em 17/06/2008 - 14:23
  • Drupal
  • Se logue ou se registre para poder enviar comentários
  • 3743 leituras
Em 17/06/2008 - 14:53 Leopoldo disse:

Legal!

Tava precisando disso. Vou aplicar.

Abraço!

Abraço!

Leonardo Silva
Produtor Cultural
Desenvolvedor Web

  • Se logue ou se registre para poder enviar comentários
Em 18/06/2008 - 11:27 pedrofaria disse:

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

  • Se logue ou se registre para poder enviar comentários
Em 29/08/2008 - 16:32 tregismoreira disse:

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

  • Se logue ou se registre para poder enviar comentários
Em 29/09/2008 - 17:16 tregismoreira disse:

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:

<p>
        <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

  • Se logue ou se registre para poder enviar comentários
Em 30/09/2008 - 14:37 a.luiz.n disse:

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

  • Se logue ou se registre para poder enviar comentários
Designimage

Este site é feito, orgulhosamente, com Drupal.