Dominio: mundoblogger.com.br
Chave: 6750f38d68212cb9ffc85aee2a0ef61d0ebf4f04
Hora do cache: 1498507634
Vida do cache: 1498550834
Status: 1
Mensagem: Centive nao respondeu
Chave do Pedido: 11808bbc6205bade68f0b70c302eaa74d4305945
Chave do Produto: PROKEY
Scroll Top

Junte-se a 22.515 pessoas que
decidiram aprender tudo sobre Criação de Blogs Profissionais e Redes Sociais.

Hospedagem - 728 x 90

Efeitos Imagens Efeitos Javascript

Galeria de Imagens 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á no menu “modelo >> Editar HTML >> Expandir modelos de widgets”.
Copie o código 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(http://4.bp.blogspot.com/_p4Te9Li52fs/So9a2fSh2jI/AAAAAAAAAAc/VX0mAW1oYHc/thumb_bg.png) 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

$(&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.

 

3. Adicionando a galeria das imagens ao gadget:

3º passo - Volte  em "layout" , 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 </ul> :

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

DICAS:

Para instalar o widget acima da coluna de postagens, você precisa conferir no painel do blog se no seu template já existe a possibilidade de adicionar um gadget acima da coluna de postagens, através do menu "layout".
Se não houver, você terá que fazer algumas modificações no código. Siga este artigo e veja como Como instalar gadgets acima da coluna de postagens.

Para instalar o widget abaixo do cabeçalho(Crosscol), você precisa conferir no painel do blog se no seu template já existe a possibilidade de adicionar um gadget nesta área, através do menu "layout".
Se não houver um campo para "Adicionar Gadget" abaixo do cabeçalho, você terá que fazer algumas modificações no código do template.
Siga este artigo e veja como Como Instalar Gadgets abaixo do Cabeçalho

Se quiser confira DEMO

[alerta]Lembrando que a funcionalidade deste script pode variar de acordo com o template.
Templates que possuem muitos scripts, acabam gerando "conflitos" entre si. Para melhor entendimento, leia este artigo: Por que alguns scripts não funcionam no meu blog.[/alerta]



De um play no vídeo abaixo e aprenda a Criar blogs Profissionais




Gostou deste artigo? Ajude nosso projeto.
Compartilhe em suas redes sociais nos botões abaixo:

Fundadora do Mundo Blogger. Autodidata que adora internet, que se encantou com blogs, seus códigos e templates, desde 2009, e por conta disso começou a "brincar" com web design nas horas vagas, até que resolveu criar o Mundo Blogger para compartilhar o que aprendeu com você através dos tutoriais publicados aqui.

Sobre o autor | Website

Fundadora do Mundo Blogger. Autodidata que adora internet, que se encantou com blogs, seus códigos e templates, desde 2009, e por conta disso começou a "brincar" com web design nas horas vagas, até que resolveu criar o Mundo Blogger para compartilhar o que aprendeu com você através dos tutoriais publicados aqui.

24 Comentários

  1. Jefferson disse:

    Vanessa, Como Que Faço Pra Colar Esse Efeito Nas Postagem Popular Do Blog ?????

  2. Andson Boa Sorte disse:

    nota 1000 sua postagem, eu fiz algumas modificações e ficou o maximo.

  3. OCanceriano disse:

    E consegui modificar o tamanho dele, faz ocorre que o local aonde deveria ficar transparente ficou branco, não sei o que ocorreu, irei olhar ainda.
    Vlw muito show

  4. .:: Clau ::. disse:

    Nathan
    Infelizmente não posso te ajudar, pq não tenho como saber o que ocorre no seu template.

    Alan
    Eu acabei de testar no chrome e para mim ele abriu normalmente.

  5. Alan Patrick disse:

    este script só pega no Mozilla? Testei no Google Chrome mas não deu certo!

  6. Nathan disse:

    Parabéns ! gosto muito do seu blog ! pego muitas coisas dele ! falando sobre o post ficou muuito bom no meu blog mais os links não estão funcionando coloco mais o link não vai ! tem alguma resposta pra isso ?

  7. Natália disse:

    Aliás… Eu já usava este código como menu em links no blog e agora testei com imagens e deu certinho!
    Muuuito legal.

  8. Natália disse:

    Respondendo o comentário da Mary, testei o código numa postagem e deu certinho. O único problema é que tem que editar a imagem e acertar o tamanho da mesma.

  9. .:: Clau ::. disse:

    «O» msd «?»
    Se existe possibilidade, eu não sei como. Desconheço.

  10. «O» msd «?» disse:

    tem como eu escolher o tamanho do zoom que irá aparecer na imagem assim que a pessoa passar o mouse?

  11. «O» msd «?» disse:

    Tipo eu gostei desse código, mas, queria saber como eu faço para colocar esse efeito dentro da postagem tipo funcionará da mesma maneira se eu colocar esse mesmo código dentro do editar html da postagem? queria um desse tipo mas que funcione para postagens de fotos no blog!

  12. .:: Clau ::. disse:

    Allen Gadelha
    Isso não é possível! Só dá pra incluir imagens através dos links mesmo.

  13. Allen Gadelha disse:

    Parabéns pelo belo trabalho. Tenho apenas uma dúvida: Como faço para incluir imagens diretamente de meu HD e não de um link na galeria de imagens jquery?

  14. .:: Clau ::. disse:

    Douglas
    Leia a informação que está no final do post sobre: "Por que alguns scripts não funcionam no meu blog".

  15. Douglas disse:

    eu uso o zoom/hover em algumas imagens do meu blog, como no exemplo acima. fui usar o componente lightbox em outras imagens e parou de funcionar o zoom/hover. sabe me explicar pq?

  16. ::Clau:: disse:

    Vanessa Pereira:
    O shadowbox realmente é muito bom. Tem um artigo publicado aqui no blog que fala sobre ele. Obrigada pelo comentario.

    Ana by anA:
    Fico feliz q tenha dado certo no seu blog, obrigada pelo comentário querida.

    Taillard:
    Pode linkar sim, eu agradeço. :)
    E obrigada pelo comentario, volte sempre que precisar.

  17. Taillard disse:

    Clau, vou te linkar a meu blog porque em breve terei que te dar creditos,pois vou usar alguns de seus tutoriais em meus tutoriais sobre a carta magica,em meus blogs.
    Você merece lindaaa!!!
    Ah ainda não usei seus lindos exclusivos e perfeitos templates,que você montou para mim.
    Sucesso menina!!!

  18. Ana by anA disse:

    Valeu Clau,
    finalmente eu pude haver no meu blog uma página só para fotos …
    se quiser conferir:
    http://anabyanabrasil.blogspot.com/
    Que Deus continue abençoando a tua mente

  19. Vanessa Pereira disse:

    Olá! To montando meu blog e seu site tem sido MUITO útil!!! Então, no meu blog tem uma página só de fotos. Para montar essa página fiz uma mistureba aqui com a galeria J.Query e o SHADOWBOX e o efeito ficou incrível! Pq com o J.Query a imagem aumentou muito pouco, aí c/ o Shadow quando vc clica na imagem ela aumenta até o tamanho real dela! Acho uma ótima dica pra quem quer publicar fotos!
    Dá uma olhada no resultado: http://www.weheartitsomuch.co.cc/p/looks.html
    Se alguem quiser saber como eu fiz é só mandar email. Tem formulário de contato no meu blog! hehe
    Não mostrei meu blog pra ninguém ainda! Não tem nem post! Quero montar ele todo direitinho pra depois começar a divulgar!!

    Super obrigada por todas as dicas preciosas q vc posta!!

  20. francinelson disse:

    ta certo vou fazer isso em todas as postagens plagiadas !

  21. francinelson disse:

    descupa!
    mas eu prometo conferir tudo !
    so que eu vou mudar todas as postagens do meu blog
    vou fazer do meu jeito e que este blog estava com outra pessoa o meu primo ae ele bagunçou tudo !
    vou fazer assim eu leia postagens mas não copio eu posto de um jeoto diferente tipo vou entender e postar com minhas palavras ok !

    atenciosamente francinelson!

  22. ::Clau:: disse:

    @Mary:
    Acredito que dê para usar em postagem sim. Faz um teste e veja se funciona.
    No caso vc segue todos os passos normalmente, mas quando chegar no passo 3 (3. Adicionando a galeria das imagens ao gadget), ao invés de adicionar em um gadget, adicione o código referente dentro do corpo da postagem.É uma questão de testar para comprovar se funciona.

    @Taillard:
    E vc como sempre uma fofa!Adorei que veio me visitar!
    Beijos.

  23. Taillard disse:

    Como sempre maravilhosa!
    Beijao amiga querida!

  24. Mary disse:

    Oi Clau! Estou com uma dúvida. Queria saber se tem como usar este recurso só em uma página? Tipo fazer uma página só com fotos? Bjinhos

Desculpe, os comentários deste artigo estão desativados.

Por gentileza, se deseja alterar o arquivo do rodapé,
entre em contato com o suporte.