teaser com sliding box

Events happening in the community are now at Drupal community events on www.drupal.org.
inchains's picture

Ola mais uma vez!

Venho assim novamente colocar uma duvida...

Criei uma pagina (node) atraves do views a qual apresenta a informacao conforme a imagem em anexo. O objectivo e apresentar as ultimas 10 noticias introduzidas.

Gostaria entao que o resultado final fosse qualquer coisa do genero deste site: http://buildinternet.com/project/mosaic/1.0/

Existe algum modulo, ou tutorial... ou alguem pode dar uma ajudinha!!! Ja corri, literalmente, quase toda a web a procura e nao encontro nada semelhante.

Agradeco!

AttachmentSize
printscreen copy.jpg87.9 KB

Comments

resposta

mspano's picture

Fiz um comentário aqui, respondendo a sua pergunta e não apareceu, fiz uma resposta grande e perdeu tudo. vou responder novamente:

Sou um brasileiro visitando o groups de Portugal.

Você pode fazer de seguinte forma, pode fazer com jquery:

  • na sua views, deixe o campo field:node teaser para não exibir
  • depois disso você sobrescreve a saída desse campo para e coloca assim:

<div class="alguma-coisa">[field:imagem]
   <div class"passa-mouse">[field:node teaser]</div>
</div>
  • feito isso você tem que fazer a configuração no .css do seu tema
  • coloque a seguinte configuração para a classe "passa-mouse":

    .play {
        background: url("images/fundo-teste.png") no-repeat scroll center center transparent;
        display: none;
        height: 100%;
        position: absolute;
        width: 100%;
    }

    /* o fundo-teste.png pode ser uma imagem de 2px x 2px com transparencia de 50% (ou a que desejar), ou pode fazer somente com css mesmo */
  • agora você tem que criar um .js que vai ser a ação do seu jquery:

    $(document).ready(function(){
        $('.views-field-image-fid').hover(function() { //tem que ver qual é o nome que gera na sua views
         $(this).find(".passa-mouse").fadeIn('fast')
            //$('.passa-mouse).fadeIn('fast');
      }, function(){
             $('.passa-mouse').fadeOut('fast');
    });
    });

Observações
- Pronto, agora você pode ter uma noção de como fazer. Faça os ajustes necessários com as divs, com o css.
- Você pode trocar "fadeIn" por "SlideIn" para ver como fica
- eu utilizei isso neste site www.ima.sp.gov.br . Na página principal tem os cases que, ao passar o mouse (rato), aparece um botão "play", eu fiz nessa mesma idéia e dá para você aproveitar. Dá uma verificada com o Firebug para você ter uma idéia melhor.

Espero ter ajudado

Até

Marcelo Spano (Brasil)

Portugal

Group categories

Classificação

Group notifications

This group offers an RSS feed. Or subscribe to these personalized, sitewide feeds: