Criando galeria de imagens com JQuery Zoom/Hover

O JQuery possibilita vários efeitos legais para um blog, inclusive em imagens. E é com este motivo, que vamos aprender a colocar um efeito bem legal nas imagens. Este efeito funciona assim: a imagem estará em um tamanho reduzido e quando passar o mouse por cima da imagem, o seu tamanho se expandirá para um tamanho determinado. Em apenas três pequenos passos você consegue este efeito bem legal!

1. Acesse a guia Modelo e clique no botão Fazer backup/Restaurar e faça uma cópia de segurança de seu modelo clicando em Fazer download do modelo completo.

2. Agora clique no botão Editar HTML e pressione Ctrl+F para abrir o Localizador e procure pela tag abaixo.

]]></b:skin>

3. Após encontrada a tag, cole o código abaixo acima da tag.

ul.thumb { float: left; list-style: none; margin: 0; padding: 10px; width: 360px; } ul.thumb li { margin: 0; padding: 5px; float: left; position: relative; width: 110px; height: 110px; } ul.thumb li img { width: 100px; height: 100px; -ms-interpolation-mode: bicubic; border: 1px solid #ddd; padding: 5px; background: #f0f0f0; position: absolute; left: 0; top: 0; } ul.thumb li img.hover { background:url(https://lh5.googleusercontent.com/-rDYx3zNj2-w/Twt0nvALjzI/AAAAAAAAB7w/H6Ni2cDy4mg/s212/thumb_bg.png) no-repeat center center; border: none;

}

Atenção! Não é recomendável você fazer alguma alteração no código acima. Fiz alguns testes e qualquer modificação errada pode causar um grande desastre de conflitos entre as imagens!
4. Após adicionar o código acima, clique em Visualizar e veja se estar tudo bem. Depois clique em Salvar modelo.

Adicionando o código JQuery no template

Pronto, já concluímos o 1º passo. Agora, vamos adicionar o código JQuery. Não é muito recomendável mexer neste código. Então, vamos lá!

1. Ainda na janela Editar HTML, pressione Ctrl+F para abrir o Localizador e procure pela tag abaixo.

<script src='http://code.jquery.com/jquery-latest.js' type='text/javascript'/> <script type='text/javascript'> $(document).ready(function(){ //Larger thumbnail preview $(&quot;ul.thumb li&quot;).hover(function() { $(this).css({&#39;z-index&#39; : &#39;10&#39;}); $(this).find(&#39;img&#39;).addClass(&quot;hover&quot;).stop() .animate({ marginTop: &#39;-110px&#39;, marginLeft: &#39;-110px&#39;, top: &#39;50%&#39;, left: &#39;50%&#39;, width: &#39;174px&#39;, height: &#39;174px&#39;, padding: &#39;20px&#39; }, 200); } , function() { $(this).css({&#39;z-index&#39; : &#39;0&#39;}); $(this).find(&#39;img&#39;).removeClass(&quot;hover&quot;).stop() .animate({ marginTop: &#39;0&#39;, marginLeft: &#39;0&#39;, top: &#39;0&#39;, left: &#39;0&#39;, width: &#39;100px&#39;, height: &#39;100px&#39;, padding: &#39;5px&#39; }, 400); }); //Swap Image on Click $(&quot;ul.thumb li a&quot;).click(function() { var mainImage = $(this).attr(&quot;href&quot;); //Find Image Name $(&quot;#main_view img&quot;).attr({ src: mainImage }); return false; }); });

</script>

2. Depois clique no botão Visualizar para ver se estar tudo certo. Depois clique no botão Salvar modelo.

Adicionando o efeito

Veja a seguir, alguns lugares em que você pode adicionar as imagens como efeito.

Adicionando na postagem

1. Para adicionar o efeito na área de postagens, basta ir ao editor de postagens e clicar na guia HTML. Depois, basta colocar o código abaixo no local desejado da sua post.

<ul class="thumb">
<li><a href="LINK1"><img src="URL-IMAGEM1" alt="" /></a></li>
<li><a href="LINK2"><img src="URL-IMAGEM2" alt="" /></a></li>
<li><a href="LINK3"><img src="URL-IMAGEM3" alt="" /></a></li>
<li><a href="LINK4"><img src="URL-IMAGEM4" alt="" /></a></li>
</ul>

Substitua as partes destacadas de vermelho, por um link que você queira que a imagem redirecione (se não quiser coloque um # no local). Substitua as partes de azul pelos links das imagens.

2. Caso queira colocar mais uma, duas, três imagens adicionais, basta colocar o código a seguir antes do </ul>.

<li><a href="LINK4"><img src="URL-IMAGEM4" alt="" /></a></li>

Adicionando na sidebar ou qualquer outro lugar no HTML
1. Acesse a guia Layout e clique em Adicionar um gadget pela área da sidebar ou footer, depois cole o código a seguir no local Conteúdo.

<ul class="thumb">
<li><a href="LINK1"><img src="URL-IMAGEM1" alt="" /></a></li>
<li><a href="LINK2"><img src="URL-IMAGEM2" alt="" /></a></li>
<li><a href="LINK3"><img src="URL-IMAGEM3" alt="" /></a></li>
<li><a href="LINK4"><img src="URL-IMAGEM4" alt="" /></a></li>
</ul>

Substitua as partes destacadas de vermelho, por um link que você queira que a imagem redirecione (se não quiser coloque um # no local). Substitua as partes de azul pelos links das imagens.

2. Caso queira colocar mais uma, duas, três imagens adicionais, basta colocar o código a seguir antes do </ul>.

<li><a href="LINK4"><img src="URL-IMAGEM4" alt="" /></a></li>

3. Clique em Salvar e depois em Salvar organização.

Dicas:
Para instalar o gadget acima da coluna de postagens, você precisa acessar a guia Layout, clicar em Adicionar gadget em qualquer lugar. Depois, arraste-o até acima da coluna das postagens.

Para instalar o gadget abaixo do cabeçalho e acima do menu, clique em Adicionar gadget em qualquer lugar. Depois arraste-o para cima do seu menu ao abaixo do cabeçalho.

Se você quiser ver como ficará seu efeito, clique aqui.

Este código funciona numa base de JavaScript (js), então ele pode apresentar conflitos com alguns efeitos que também utiliza o JavaScript. Para isso não ocorrer, você deve excluir algum dos dois. Mas confira antes de rejeitar o efeito.

Pronto, seu efeito já foi adicionado no seu blog! Eu acho este efeito bem legal e funciona como o do Google imagens, não acha? Abraços e boa sorte!

http://joao987.blogspot.com/2012/01/criando-galeria-de-imagens-com-jquery.html