20.2.12

Efeito JQuery Zoom!

Olá ... Hoje vou ensinar a colocar este efeito JQuery Zoom nas imagens. Este efeito pode ser colocado tanto na areá da postagem quanto nos gadget, lembrando que é possível adicionar links nas imagens. As imagens ficaram em um tamanho menor com colunas de três. Aconselho baixar uma cópia do seu template, caso algo de errado aconteça é só recoloca-lo. Segue abaixo exemplo:
Crédito tutorial: Mundo Blogger! 










 VÁ em Design - Editar HTML 
Clique em expandir modelos de widgets - e aperte ctrl F do seu teclado.
 Copie o código abaixo, e cole 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(http://4.bp.blogspot.com/_p4Te9Li52fs/So9a2fSh2jI/AAAAAAAAAAc/VX0mAW1oYHc/thumb_bg.png) no-repeat center center; 
border: none;
}

 Clique em salvar.


Copie o código abaixo e coloque-o antes de  </head>
(Preste atenção) NÃO é acima - é ANTES! 


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


 Clique em salvar.


 Para adicionar o efeito na areá dos gadgets, vá em Design - Elementos da página - Adicionar um Gadget - e selecione a opção "HTML/JavaScript". Cole o código abaixo.
 Caso queira colocar na areá dos post é só copiar o código e inserir na areá da postagem.


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

Nenhum comentário:

Postar um comentário

* Primeiramente muito obrigada pela visita.
* Volte sempre que puder, ficarei muito feliz.
* Seja educado (a), comentários ofensivos não serão aceitos.
* Críticas construtivas, sugestões e elogios são bem vindos.
* Se pegar alguma coisa, credite sempre.

Página Anterior Próxima Página Home
Copyright © Blog da Ka |
Design by Karina Karoline | Tecnologia do Blogger
    Twitter Facebook Google + YouTube