Junte-se a 22.515 pessoas que
decidiram aprender tudo sobre Criação de Blogs Profissionais e Redes Sociais.

Efeitos Imagens Vanessa S.

Pré-visualização da imagem em movimento com JQuery

Hoje veremos como incluir um efeito diferente nas imagens dos posts.
Trata-se de um efeito de pré-visualização em movimento das imagens dos posts, que funciona a base de um script desenvolvido por Alen Grakalic, autor do site CSS Globe em conjunto com o JQuery.
Com base no efeito que o script gera, eu fiz uma adaptação na chamada do código HTML e acrescentei um pouco de CSS para ter um melhor funcionamento no Blogger.
Neste efeito, quando passamos o mouse em cima de cada imagem miniatura, o script faz com que se abra uma “pop up” para visualização da imagem em tamanho maior.

pre-visualizacao-de-imagens

Demo

Para conseguir este efeito, é necessário a incorporação de javascript à base da biblioteca JQuery e inserção de códigos CSS em seu template.

[becape]Segurança nunca é demais, portanto, recomendo que faça um Backup do seu template antes de prosseguir para evitar transtornos.[/becape]

1. Instalar o arquivo Javascript

Este script funciona em conjunto com a biblioteca do JQuery, caso você já tenha esta biblioteca instalada em seu blog, não será necessário repetir a chamada dela( linha destacada na cor azul no código)

Vá na aba “design” em “Editar HTML” e procure pela tag </head>
E cole logo ACIMA dela o código a seguir:


<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
this.imagePreview = function(){ 
 /* CONFIG */
xOffset = 200; // distancia do topo //
yOffset = 30; // distancia a esquerda //

// estas duas variáveis determinam a distância popup a partir do cursor
// se precisar ajuste para obter o resultado correto

/* END CONFIG */
$("a.preview").hover(function(e){
this.t = this.title;
this.title = "";
var c = (this.t != "") ? "<br/>" + this.t : "";
$("body").append("<p id='preview'><img src='"+ this.href +"' alt='Image preview' />"+ c +"</p>");
$("#preview")
.css("top",(e.pageY - xOffset) + "px")
.css("left",(e.pageX + yOffset) + "px")
.fadeIn("fast");
},
function(){
this.title = this.t;
$("#preview").remove();
});
$("a.preview").mousemove(function(e){
$("#preview")
.css("top",(e.pageY - xOffset) + "px")
.css("left",(e.pageX + yOffset) + "px");
});
};

$(document).ready(function(){
imagePreview();
});
//]]>
</script>

2. Aplicar estilos CSS

No menu “modelo”, entre na edição HTML do seu template, não precisa clicar em “expandir modelos de widgets” e procure pela tag ]]></b:skin>
e cole o seguinte código logo ACIMA dela:


ul#imagepreview{
margin:0;
padding:0;
}
ul#imagepreview li {
list-style:none;
float:left;
display:inline;
margin-right:10px;
}
#preview{
position:absolute;
border:1px solid #ccc;  /*---Edite cor da borda---*/
background:#000;   /*---Edite cor de fundo---*/
padding:5px;
display:none;
color:#fff;   /*---Edite cor da fonte---*/
}

Obs: Todos os trechos editáveis já estão identificados e destacados no código.

3. Ativar o efeito nas imagens

Para usar o Efeito em Imagens dentro do post, é necessário que você hospede a imagem que vai utilizar, em algum servidor de imagem qualquer, como o Picasa Web, por exemplo.
Lembrando que o código a seguir deve ser inserido dentro da postagem a ser publicada, através da aba “editar html” no próprio editor de postagens do Blogger.

Para chamar o efeito em imagens utilize o seguinte código, e cole o endereço da sua imagem nos locais indicados:


<ul id="imagepreview">
<li><a href="URL-DA-IMAGEM-QUE-DEVE-APARECER-NO-POPUP" class="preview"><img src="URL-DA-IMAGEM-MINIATURA" width="200" height="200" alt="" /></a></li>  <li><a href="URL-DA-IMAGEM-QUE-DEVE-APARECER-NO-POPUP" class="preview"><img src="URL-DA-IMAGEM-MINIATURA" width="200" height="200" alt="" /></a></li> 
</ul>

No código acima, as partes destacadas em vermelho correspondem a largura e altura da imagem miniatura do post. Se preferir, você pode ajustar esses valores.

[dica]DICA
Procure evitar a utilização de imagens grandes demais, pois quanto maior for a 1ª imagem (a que aparece no pop up), quando o mouse passar em cima dela, mais próxima ela ficará do rodapé da tela no monitor. Isto porque a imagem do pop upa se movimenta. Se usar imagens enormes, pode acabar deixando a imagem “cortada” na parte inferior conforme haja rolagem na tela. Depois não adianta voltar aqui e reclamar que a sua imagem ficou cortada, cappicce?[/dica]

Caso queira mais imagens com esse efeito, apenas repita o procedimento quantas vezes for necessário.

 
[alerta]ATENÇÃO:
Este efeito funciona a base de arquivo javascript e sua funcionalidade pode variar de acordo com o template.Templates que possuem muitos scripts, acabam gerando “conflitos” entre si. Caso este script não funcione em seu blog, faça uma avaliação de quais realmente são mais necessários. Para melhor entendimento, leia este artigo: Por que alguns scripts não funcionam no meu blog.[/alerta]

Sobre o autor | Website

Fundadora do Mundo Blogger. Autodidata que adora internet, que se encantou com blogs, seus códigos e templates, desde 2009, e por conta disso começou a "brincar" com web design nas horas vagas, até que resolveu criar o Mundo Blogger para compartilhar o que aprendeu com você através dos tutoriais publicados aqui.

Desculpe, os comentários deste artigo estão encerrados.

16 Comentários

  1. Roger disse:

    Cara estou construindo um site, insere todo o código correto, mas ao passa o mouse só exibe uma telinha preta, não estou conseguindo visualizar a imagem.

  2. Gerando uma nova visão disse:

    Muito obrigado pelo tutorial.
    Rápido e pratico. E respondeu 100% as minhas expectativas.
    Agora posso usar link que ao passar o rato aparece a imagem.
    Combina perfeito com alguns post

    Até mais.

  3. 32del disse:

    Gata sem Palavra parabems…… vc é fera… e lindaaaaa

  4. black™ disse:

    Ok muito obrigado!!

  5. .:: Clau ::. disse:

    black™
    Lamento,mas desconheço essa opção que vc quer.

  6. black™ disse:

    Olá muito bacana o efeito!!
    Tenho uma sujestão. Poderia arranjar um que faça o seguinte: por exemplo eu uso somente o titulo dos posts em minha pagina inicial e queria que ao a pessoa passar o mouse o mesmo abrisse como um onmouseover e abriçe uma janela de previzualização com um print da página. Um exemplo muito utilizado disto são os fóruns warez que tem bastante titulos links e dão um preview da pagina antes da pessoa acessar. Estou tentando fazer o mesmo mais com muita dificuldade. Qualquer coisa acessa meu blog que voce verá minha página inicial e entenderá.
    Valewsss desculpa os erros de portugues, pois toh com a musica no maximo e fazendo tcc aeuheh. Abraços
    ótimo blog!!

  7. [L]or[D]•[V]in[i] disse:

    Muito obrigado pela suas dicas eu estou melhorando cada vez mais meu Blog
    se quiser pode visitar

    http://andarilhoxperdido.blogspot.com/

  8. .:: Clau ::. disse:

    Walther Alves
    Este efeito funciona a base de arquivo javascript e sua funcionalidade pode variar de acordo com o template.Templates que possuem muitos scripts, acabam gerando "conflitos" entre si, e isso deve ter ocorrido no seu template. Dá uma lida no final do artigo.

  9. Walther Alves Almeida disse:

    Coloquei esse efeito no meu blog so,que desativa um outro efeito meu, um efeito de apresentaçao de fotos que tenho no inicio do blog as fotos pararam de muda a ordem .o efeito e tipo uma apresntação de slade.Sera q tem como concerta isso ?desde ja agradeço !

  10. cafeblogueiro disse:

    Vc que criou o Script? Muito bonito o efeito quase todos efeitos com JQuery são muito bonitos =D .

    Abraço:
    Matheus Rezende

    Espero a visita.

  11. EnigmA disse:

    ADorei a dica!!!!!!
    vou adaptá-la ao blog do Allan Poe!

    http://allanpoe4.blogspot.com/

  12. ? Lucy Sem Fronteiras ? disse:

    Ahhhh agora simmmm rsrsrs

    agora deu para ver o efeito, realmente muito legal Clau!
    Vou ver se experimento em meu blog tb:)

    Beijos minha querida!

    Lucy

  13. .:: Clau ::. disse:

    Oi gente, me desculpem! Eu acabei esquecendo de abrir o blog para visualização..rs
    Mas já abri, o blog já está aberto. Podem olhar o Demo agora. 😉

  14. Igor Sousa disse:

    Oi Clau, tentei entrar no blog de demonstração para ver o efeito, mas quando clico em DEMO, aparece a seguinte mensagem: “Este blog está aberto exclusivamente a leitores convidados”.

  15. Luuck disse:

    o blog de teste é so pra convidados.

  16. amorepazsemfronteiras disse:

    Olá Clau!!!
    Que legal esse efeito nas imagens!

    Aii mas que pena, queria tanto ver o 'demo', mas é só pra blogs/ leitor convidado 🙁

    Mas de qualquer forma, deve ficar muito lindo o efeito sim.

    Beijos

    Lucy

Por gentileza, se deseja alterar o arquivo do rodapé,
entre em contato com o suporte.