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