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

Itens ativos

  • Image Field - imagem não aparece
  • Site sobre o Pier de Ipanema
  • Subi o site mas imagens não aparecem
  • htaccess funciona em subdomínio mas não no raiz na locaweb
  • Duvidas com Formulários e Notícias
  • TiniMCE retira a tag 'rel=' do Lightbox2
  • Drupal no xammp -erro na instalação
  • Obter o URL Alias de um determinado caminho de taxonomia, através de PHP
  • Webform com %get - não funcionou
  • não sei trabalhar com o drupal
mais

Pesquisa

Google
Web Drupal Brasil

Login do usuário

  • Criar nova conta
  • Solicitar uma nova senha

Parceiros

Assine o RSS do Drupal-BR

RSS dos itens mais ativos

RSS do conteúdo

RSS dos comentários

Início » Fóruns » 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

‹ Como configurar urls almigáveis? Onde hospedar site com Drupal? ›
Enviado por kojieumesmo em ter, 17/06/2008 - 15:23.
  • Drupal
  • Por favor, se logue ou se registre para poder enviar comentários
  • 1258 leituras

Legal! Tava precisando

Legal!

Tava precisando disso. Vou aplicar.

Abraço!

Leonardo Silva
Produtor Cultural
www.xulispa.com.br
www.ecultura.com.br

Enviado por Leopoldo em ter, 17/06/2008 - 15:53.
  • Por favor, se logue ou se registre para poder enviar comentários

MUITO BOM Cara... Parabéns

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

Enviado por pedrofaria em qua, 18/06/2008 - 12:27.
  • Por favor, se logue ou se registre para poder enviar comentários
Designimage

Este site é feito, orgulhosamente, com Drupal.