Gallery de Imagens com JQuery Zoom/Hover

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" >> "Editar HTML" >> "Expandir modelos de widgets".


Copie o código na caixa  abaixo e cole-o ACIMA de: ]]></b:skin>

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/AVvXsEjTi2gI4qYdpqF8icQ_FMP0LccElgpKWoBlYpxfvqX89yuJNln8Rb6JGGTivIg7aQLqz7HlKiKpCOz5yekasb0VhPOF4XfUNPl1avjT0FbbEUSmYiFWm89p398naBokGcUXqdAWDKOVfXfC/) no-repeat center center; border: none; }

2. Aplicar o Javascript:

2º passo - Copie o código abaixo e coloque-o antes de </head>

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


3. Adicionando a galeria das imagens ao gadget:

3º passo - Volte na aba "Design" >>"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:

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

Para inserir mais imagens á galeria, repita a linha abaixo antes do código :

<li><a href="LINK"><img src="URL-IMAGEM" alt="" /></a></li>