Efeito de Pré-visualização da imagem com JQuery

Olá leitor do Tecnoblog, hoje venho ensinando como incluir um efeito bastante legal em seu Blog, o efeito que você irá incluir e uma Pré-visualização da imagem com JQuery, neste efeito ao você passar o mouse acima da imagem, irá abrir uma Pop-Up, com um efeito parecido Transition, para observar a imagem em um tamanho maior!

Uma dica bastante eficaz e fazer o Backup de seu template!

Instalando o Javascript

Este script funciona com a biblioteca do JQuery na versão 1.4.2, caso você já tenha ela instalada em seu blog, não precisará instala-la novamente.

1. Faça o login no Blogger em vá em modelo, Depois vá em Editar HTML

2. E procure pela seguinte tag:

</head>

3. E Acima dela adicione o seguinte código:

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

Aplicando o CSS

1. E ainda na aba Modelo e Editar HTML, procure pela seguinte tag:

]]></b:skin>

2. E Acima da tag citada acima adicione o seguinte código:

ul#imagepreview{margin:0; }

ul#imag

padding:0;epreview li {;

float:left;

di

list-style:nonesplay:inline;px;

}

#preview{

po

margin-right:10sition:absolute;ccc; /*---Edite cor da borda---*/

background:#000;

border:1px solid # /*---Edite cor de fundo---*/padding:5px;display:none;color:#fff; /*---Edite cor da fonte---*/}

Ativando o efeito nas imagens do Blogger

Para utilizar este efeito na imagem dentro do post e necessário que ela esteja hospedada em algum site em que hospeda imagens, Como o Picasa Web, e este efeito deve ser adicionado na post através da opção HTML do post.

E para utiliza-lo insira o seguinte código:

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

Pronto, Terminamos qualquer duvida comente!


JavaScript por: Alen Grakalic - CSS Globe
Personalização por: Clau - Mundo Blogger