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

Instant Message fev

Link Direto Fev

Mobile Instant Message fev

Banner Rodapé pc

Banner Mobile Definitivo 2018

Popunder Mobile Definitivo

Banner Mobile Definitivo

Instage Mensagem pc

Popunder Definitivo

Banner video

Banner Mobile 20188

Banner Mobile 2018

Popunder Mobile Real

Popunder Mobile

Flickr Images