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

Yo! Como vão hoje queridos bunnie's? Venho trazer a segunda postagem do dia, faz tempo que não posto assim em sequencia. Bom saindo um pouco dos menus, venho trazer um efeito legal para imagens, pode ser tanto usado em gadgets como em postagens, fica muito lindo. 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. Porém o código que apresento aqui é uma adaptação com um pouco d CSS do Mundo Blogger. 

Brevia do efeito

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. Para ver o efeito na ativa clique no menuzinho acima. 

1. Vá até o HTML do seu blog, clique dentro da área do código e ative a pesquisa selecionando Ctrl+F, procure por  </head>, e acima dele cole:

Códigos

<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. Agora vamos aplicar o estilo no caso o CSS, ainda no HTML do seu blog, clique dentro da área do código e ative a pesquisa selecionando Ctrl+F, agora pesquise por  ]]></b:skin>, assim que achar acima dele cole o código abaixo:

Códigos

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---*/
}

Salve as aplicações e futuramente volte para personalizar ao seu gosto.

3. Agora vá em Layout e abra um novo  Gadget Java/Script  e dentro cole:

Códigos

<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 correspondem a largura e altura da imagem miniatura do post. Se preferir, você pode ajustar esses valores. Se quiser aplicar mais imagem, basta colar esse código quantas vezes desejar antes do </ul>:

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

___________________(Entendendo o código)___________________

# 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. (Resolva o problema na próxima explicação).

# Se quiser controlar o tamanho 1ª imagem (a que aparece no pop up), procure por  ]]></b:skin>, e acima dele cole:  #preview img{ width: 339px; height: auto; } na parte marcada em azul é o tamanho da largura da imagem, coloque a largura que deseja. a parte marcada em verde é a altura, esta no automático, ou seja de acordo com a largura ela vai se ajustar. Assim pode evitar que as imagens fiquem grandes, e resolvendo o problema da explicação acima. 

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

___________________(fim da explicação)___________________