Criando galeria de imagens com JQuery Zoom/Hover

Compartilhar:
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!

Aplicando estilos ao efeito

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!
► Postagens Relacionadas:

4 Comentários

Allef Danidan disse...

Amigo,boa tarde e meus parabéns, fantástico,fantástico,fantástico!!!
O seu blog é uma Maravilha !! Deu certo, ate que enfim encontrei um lugar que me ajudasse a instalar uma galeria de imagens, foi um ano tentando, parece mentira que levei todo esse tempo, mas foi isso mesmo. (Todos que ensinavam não dava certo era uma briga de conflitos entre códigos.)
Ate que encontrei você aqui.Muito obrigado mesmo por tudo e que DEUS te abençoe sempre, sempre mesmo.

24 de março de 2013 13:11
João Almeida disse...

Obrigado. rsrs Que você volte sempre em nosso blog conferir os diversos tutoriais e dicas!

24 de março de 2013 13:22
Allef Danidan disse...

Nunca mais nesta vida eu vou deixar o seu blog, nunca mais mesmo.Amanha estarei fazendo a divulgação do seu blog nas duas faculdades onde eu estudo.Só não vou seguir seu blog, por que o que eu tenho é de conteúdo adulto.Não vou esquecer nunca do que o senhor fez por mim.

24 de março de 2013 13:26
João Almeida disse...

Obrigado! :D

24 de março de 2013 13:46

Postar um comentário