Galeria de Imagens JQuery Zoom/Hover
Autor: Rhay_Fither | Publicado: 2012-01-07T00:13:00-08:00

Com o JQuery, é possível criar vários efeitos no blog, inclusive em imagens.Através deste tutorial, em apenas 3 passos você poderá criar uma galeria de Imagens com jQuery. Nesta galeria, suas imagens se apresentam em tamanho menor, e ao passar o mouse em cima, elas ficarão maiores.
Você pode , por exemplo, instalar esta galeria acima da área de postagens, ou abaixo do cabeçalho (crosscol).


Vejamos como aplicar este efeito.
1. Aplicar estilos ao efeito:
1º passo - Vá em "Design" &gt;&gt; "Editar HTML" &gt;&gt; "Expandir modelos de widgets".Copie o código abaixo e cole-o ACIMA de ]]&gt;&lt;/b:skin&gt;

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(http://4.bp.blogspot.com/_p4Te9Li52fs/So9a2fSh2jI/AAAAAAAAAAc/VX0mAW1oYHc/thumb_bg.png) no-repeat center center;&nbsp;border: none;}

2. Aplicar o Javascript:

2º passo - Copie o código abaixo e coloque-o antes de &lt;/head&gt;



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


3. Adicionando a galeria das imagens ao gadget:

3º passo - Volte na aba "Design" &gt;&gt;"Elementos da página", no campo onde você quiser adicionar sua galeria, clique em "Adicionar um Gadget" e Selecione a opção "HTML/JavaScript" e cole o seguinte código dentro dele:


&lt;ul class="thumb"&gt;
&lt;li&gt;&lt;a href="LINK1"&gt;&lt;img src="URL-IMAGEM1" alt="" /&gt;&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="LINK2"&gt;&lt;img src="URL-IMAGEM2" alt="" /&gt;&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="LINK3"&gt;&lt;img src="URL-IMAGEM3" alt="" /&gt;&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="LINK4"&gt;&lt;img src="URL-IMAGEM4" alt="" /&gt;&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;


Para inserir mais imagens á galeria, repita a linha abaixo antes do código &lt;/ul&gt; :


&lt;li&gt;&lt;a href="LINK"&gt;&lt;img src="URL-IMAGEM" alt="" /&gt;&lt;/a&gt;&lt;/li&gt;


Bom Galera é isso e comentem!!!


DOWNLOAD CÓDIGOS:DOWNLOAD CÓDIGO PARTE 1DOWNLOAD CÓDIGO PARTE 2DOWNLOAD CÓDIGO PARTE 3