Galeria de Imagens JQuery Zoom/Hover

Ohayoo bunnie's! Hoje venho trazer um estilo de galeria, usando  JQuery . Conheço esse tutorial desde que comecei a me aventurar pelo mundo do HTML, até já o utilizei algumas vezes e acabei por decidir de posta-lo aqui. Encontrei esse tutorial no Mundo Blogger, então se utilizarem por favor creditem. A galeria é muito fácil de aplicar, em apenas três passos você o coloca em seu blog. Além de ser muito fácil de personalizar.

Brevia do efeito

1. Vá até o HTML do seu blog, clique dentro da área do código e ative a pesquisa selecionando Ctrl+F, agora pesquise por  ]]></b:skin>, assim que achar acima dele cole o código abaixo:

Códigos

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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXjHmQIWr0CA0suFICwcjgkGnJcA-5XrfVwIteVB0ubtmapdfBi9zEfsQsEMSr4LBwoZtCQaOGdIqxxnFjxilJG-fmsplQCIiqL7N2qg3PbBBJwXIgqpLb9fNdEJfR2k9vuSpkiXDB7yom/) no-repeat center center; border: none; }

2. Agora procure por </head> e acima dele cole o código abaixo:

Códigos

<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>

Salve as aplicações.

1. Depois disso vá em Layout e abra um novo  Gadget Java/Script  e dentro cole:

Códigos

<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>

Edite a onde se pede, colocando a url/endereço das imagens, e o link para onde deseja direcionar. e desejar aplicar mais imagens, basta ir copiando o código abaixo, mas sempre colocando antes de </ul>.  Caso não queira utilizar links nas imagem remova a para marcada em vermelho:

 <li><a href="LINK1"><img src="URL-IMAGEM1" alt="" /></a></li>

É só isso. =) Espero que consigam aplicar, qualquer dúvida ou problemas basta comentar. Beijins e até logo. <3