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

• Facebook
• WhatsApp
• Twitter
• Pinterest
• LinkedIn

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.

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]

• Facebook
• WhatsApp
• Twitter
• Pinterest
• LinkedIn