dica blogger #009

Hoje ao visitar os blogs onde regularmente encontro dicas para o blog encontrei uma dica bastante interessante!
Trata-se de um script que numa imagem pode fazer o efeito zoom numa determinada zona definida pelo cursor ao passa-lo por cima dessa foto.

É bastante facil usar este hack (até me sinto um hacker só por usar esta palavra!) e vou deixar aqui a papinha toda pronta os códigos prontos a usar.

Então é assim...
Entram no código fonte do blog e procuram a tag </head>
Antes dessa tag, inserem os seguintes códigos

<script src='http://dl.dropbox.com/u/780208/java/zoom/jquery-1.3.2.min.js' type='text/javascript'/>

<script src='http://dl.dropbox.com/u/780208/java/zoom/jquery.jqzoom1.0.1.js' type='text/javascript'/>

<link href='http://dl.dropbox.com/u/780208/java/zoom/jqzoom.css' rel='stylesheet' type='text/css'/>

<script type='text/javascript'>

$(function() {

var options =

{

zoomWidth: 350,

zoomHeight:350

}

$(&quot;.jqzoom&quot;).jqzoom(options);

var options2 =

{

zoomWidth: 350,

zoomHeight: 350,

zoomType:&#39;reverse&#39;

}

$(&quot;.jqzoom2&quot;).jqzoom(options2);

});

</script>

Gravam as alterações e vão criar um novo artigo.
Inserem a imagem e no código da imagem vão adicionar o hack como podem ver a vermelho no código abaixo.

<a href="http://www.gapingvoid.com/stupid002.jpg" class="jqzoom"><img border="0" height="80" src="http://www.gapingvoid.com/stupid002.jpg" width="150" /></a>

O efeito é o que podem ver abaixo passando o cursor por cima da imagem.




Nota: Como habitualmente, este código não funciona com imagens carregadas directamente no blogger.