segunda-feira, 28 de novembro de 2011

Galeria de imagens com efeito Zoom/hover

Um tutu super legal hoje *o* quem tá afim de conferir levanta a mão \o/. Ok confesso acordei meia lesada hoje, hauhauahuaha. Mais falando sobre o tutorial é basicamente isso, uma galeria de imagens que quando você passa o mousse a imagem aumenta. É possível adicionar links, porém tem que abrir em uma nova Guia. Enfim vejam


Lembrando os créditos vão para o Mundo Blogger .Super legal né? Você pode ter uma igualzinha no seu blog com apenas 3 passos super fáceis! 
97 Vá no seu HTML marque a opção expandir modelos de Widgets e procure por   
 ]]></b:skin> 
Cole o código abaixo, 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/AVvXsEhRnUehdScNv6FZ4LD5jyzufWiMHldCoRTQY3pt5MzsZkQNYw46iKfj-C3DQhRWG8tFBlA4lNbTDDCaEpdyt_Hp1XrqWNyUzfDPCWJ2BGVlYE7_W8sOn7lu5XxU9nKACCt7eUXS_rmKyTxF/) no-repeat center center;
border: none;
}


97 Agora procure por: </head>  e cole o seguinte código ANTES da tag destacada:

<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 modificações
97 Agora vá em Design  Elementos da página  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 </ul> :

<li><a href="LINK"><img src="URL-IMAGEM" alt="" /></a></li>
Não esqueça de colocar a url da sua imagem ou o link de destino(se quiser)nos trechos destacados
Fácil né? Espero que tenham curtido!
Confiram minha página +tags, ficou super legal com esse efeito.

30 comentários :

  1. Ameei esse tutu Jackie!
    deixa eu te perguntar uma coisa,como eh qe eu coloco tags no blog?

    ResponderExcluir
  2. OMG! Amei demais, ja tem uns tempos que eu tava procurando isso, perfect (:

    ResponderExcluir
  3. muito lega!quando eu precisar usar,já estará feito a parte do HTML!AMEI!
    :c:

    ResponderExcluir
  4. A,e esqueci de dizer.Parabéns aos 353 seguidores!

    ResponderExcluir
  5. \o/\o/\o/\o/
    Hahaha ! você lesada como assim ?!
    Amigaaa amei o tutu de hoje pois acho este efeito LindãO' huashuas
    :k: Bjs

    ResponderExcluir
  6. Amei o tutoral de hoje!
    Um lindo dia pra você!
    beijos!

    ResponderExcluir
  7. nossa , amei seu blog ! mt fofo :l:
    segue ? :)

    http://helloc2lilla.blogspot.com/ beijos

    ResponderExcluir
  8. Nossa que perfeito!! vou por lá no meu blog de templates, pra as pessoas verem meus trabalhinhos! hehe amei *-*

    ResponderExcluir
  9. Nossa, quanto tempo que não entro nos blogs :i:, sempre me dava vontade de entrar e comentar, mas enfim, voltei e amei o post, super dica a sua.
    bjks

    ResponderExcluir
  10. Muito legal ,adorei!
    http://sweetdreamssah.blogspot.com/

    ResponderExcluir
  11. Nossa, adorei a dica, muito útil.
    Mais enfim, Jackie, preciso da sua ajuda. É que eu tenho um blog novo agora e eu queria que você divulgasse pra mim, ou pelo menos fizesse afiliação. Vai ajudar muito a gente.
    http://10parameianoite.blogspot.com/
    Bj, obg.

    ResponderExcluir
  12. Nossa que liindo, deve ficar bem legal em uma página de games néh.. Vo tentar fazer, kkk.

    Sim eu tento fazer as coisas kawaii e não consigo, sempre fica com um toque vintage.. Mas eu gosto bastante..

    BigBjok´s, Guriia

    ResponderExcluir
  13. Hooy,só vim avisar que o blog mudou de url.

    http://teen-dream-td.blogspot.com/

    ResponderExcluir
  14. Hoooooy Jackie

    Como faço para colocar musica nos blogs pelo o site:

    http://muzicons.com/


    Bjokas!

    ResponderExcluir
  15. Oii Flor, adorei seu blog

    www.i--love-y.blogspot.com

    Thau !

    ResponderExcluir
  16. eu adorei... assim que arrumar o blog direitinho claro que vou botar. É uma ideia bem legal =D
    beeijos

    ResponderExcluir
  17. Nossa, que legal essa galeria, amei, ótimo código!!!

    Tudo bem, eu entendo, às vezes é difícil saber quem está do outro lado do pc... Pena que nem todo mundo respeita o próximo...

    Obrigada pelo comentário e pela presença no DSM, fiquei muito feliz com sua visita, volte sempre que quiser!!!

    Mil Sweetkisses ♥
    http://docesonhodemenina.blogspot.com/

    ResponderExcluir
  18. uuuhhuu adorei! Super super unico!
    bjinhoos
    blogdagiu1.blogspot.com

    ResponderExcluir
  19. florzinha vc é show
    de que cidade vc é?
    bezosssssssssssssss


    :d:

    ResponderExcluir
  20. Oii Flor,que bom que gostou do meu blog,e eu adorei seu blog

    www.i--love--y.blogspot.com

    Thau !

    ResponderExcluir
  21. Adorei o tutorial *_* :k:

    Beijão, Catharina
    http://s2sonhosdegarotas.blogspot.com/

    ResponderExcluir
  22. Eu usei,ontem estava perfeito,mas hoje os links num tão mais funfando D: Kkk'

    Mas é uma ótima dica ;)

    ResponderExcluir
  23. Parece fácil de fazer, mas tem que prestar um pouco de atenção. Mesmo assim, adorei o tutorial *-*

    Beijos.
    onthefame.tk
    Tem post novo!

    ResponderExcluir
  24. Super lindo :k:

    generationteenbr.blogspot.com

    ResponderExcluir
  25. e pra colocar no post, tipo vc fez? eu tentei fazer normal, só que no html da postagem, e não deu certo :/

    Blog Mundo da Moda | Twitter
    Bye Bye♥

    ResponderExcluir
  26. mimimi :( Naao conseegui . Mesmo assim ama seeu bloguito ^^

    ResponderExcluir
  27. Mas isso vai aparecer em toda a imagem que eu colocar? :k:

    ResponderExcluir
  28. responde no meu blog: http://blogdalarag.blogspot.com/

    ResponderExcluir
  29. Oi Jackie :)
    O tuto é ótimo! Eu tentei fazer mais quando eu clico na imagem não redireciona a URL que eu coloquei... você poderia me ajudar?
    Olha aí:
    http://ponhaglitter.blogspot.com/p/extras_12.html
    Xeru ♥

    ResponderExcluir

.