Swift

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.

You Might Also Like

0 comentários

Facebook 2018

Visitas

Flickr Images