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

► +A +/- -A
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
► Postagens Relacionadas:

4 Comentários

Luiz disse...

Cara, não funfou no meu não, ao instala o efeito a imagem ficou no rodapé do meu blog. Me ajuda ai!

26 de dezembro de 2011 11:20
Caio Vinicius disse...

Olá Luiz qual Script além do Jquery você usa em seu blog?

26 de dezembro de 2011 12:16
Luiz disse...

Eu estava vendo aqui no meu template eu uso o scriptaculous o prototype e o Jquery, eu só uso eles.

26 de dezembro de 2011 13:57
Caio Vinicius disse...

Luiz realmente o problema e este!
Ao você usar o Jquery juntamente com o scriptaculous, no mesmo template, entram em conflito, como já aconteceu comigo.
O Prototype junto com o Jquery entram em conflito entre si.
Preste bem atenção ao instalar um widget em que envolva scripts em seu blog, observe o seu template os scripts em que mantem seu blog funcionando corretamente.
Pois blogs que possuem muitos scripts, com certeza irão entrar em conflito.
Obrigado pelo comentário e siga as dicas que citei acima :) !

26 de dezembro de 2011 15:00

Postar um comentário

Seu comentário é bem vindo, mas leia antes de comentar...
→ Se os comentários conter palavrões, xingamentos, ofensas ao autor ou qualquer pessoa, não serão publicados!
→ Não Contiver outros sites!
→ Não conversar com comentários!
→ Não conter propaganda!
→ Visite o nosso termos de uso
Obrigado e volte sempre!