Cursos 24 Horas - Cursos 100% Online com Certificado

Galeria de imagens com jquery

10 Comentários Autor : Notícia e blog 30 agosto 2009
Que tal adicionar uma galeria de fotos no seu blog com o jQuery. Mas o que é jQuery?


jQuery é um framework para ajudar os desenvolvedores a se concentrarem na lógica dos sistemas da web e não nos problemas de incompatibilidade dos navegadores atuais.
Seu lema é escrever menos e fazer mais.


Com ele é possível criar vários efeitos no seu Blog,está semana vou procurar mais efeitos com o jquery para blogger hoje vai ser o primeiro da serie, o efeito de hoje é exibir uma imagem pequena que ao passar o mouse ou rato ele ficará maior então vamos aplicar este lindo efeito:


1.Faça login no Blogger


2.Acesse a area Layout->Editar html


Agora com as tecla Ctrl e F pesquise o código abaixo:
]]></b:skin>
Agora antes do código acima insira o código abaixo:
/* Blogger Zoom Gallery By AllBlogTools.com */ ul.thumb { float: left; list-style: none; margin: 0; padding: 10px; width: 360px; } ul.thumb li { margin: 0; padding: 5px; float: left; position: relative; /* Set the absolute positioning base coordinate */ width: 110px; height: 110px; } ul.thumb li img { width: 100px; height: 100px; /* Set the small thumbnail size */ -ms-interpolation-mode: bicubic; /* IE Fix for Bicubic Scaling */ 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; /* Image used as background on hover effect border: none; /* Get rid of border on hover */ }
Agora procure pela código abaixo:
</head>
E antes dele coloque o código abaixo:
<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 alterações.


Inserindo imagens e criando uma micro galeria


1.Vá para Layout->Elementos da página->Adiciona um Gadget->Html/JavaScript
E coloque o código abaixo dentro do Gadget fazendo as alterações necessárias
<ul class="thumb"> <li><a href="#"><img src="picture 1 Link" alt="" /></a></li> <li><a href="#"><img src="picture 2 Link" alt="" /></a></li> <li><a href="#"><img src="picture 3 Link" alt="" /></a></li> <li><a href="#"><img src="picture 4 Link" alt="" /></a></li> </ul>
Notas: O código em vermelho é o link da imagem se não quiser adicionar um link a imagem deixe como está, o código em verde é o url da imagem deve ser substituído pelo url da imagem desejada ex: http://i30.tinypic.com/zx1fn8.png, para inserir mais imagens repita está linha abaixo antes do código </ul> :
<li><a href="URL 1 #"><img src="picture 1 Link" alt="" /></a></li>
Para ver um demo do script clique aqui

Referência: Allblogtools,Wiki

    10 Comentários

    Principe Encantado disse...
    30 de agosto de 2009 12:07 #

    Bom dia!
    " A grandeza vem não quando as coisas sempre vão bem para você,mas a grandeza vem quando você é realmente testado, quando vocêsofre alguns golpes, algumas decepções, quando a tristeza chega.
    Porque apenas se você esteve nos mais profundos vales você poderáum dia saber o quão magnífico é se estar no topo da mais alta montanha."
    Um boa semana para você.
    Abraços forte

    Notícia e blog disse...
    30 de agosto de 2009 14:14 #

    @Principe Encantado Obrigado para você também!!!

    Jonathan Hess disse...
    30 de agosto de 2009 15:44 #

    Perfeito, estou usando em meu blog para anunciar! Aproveito para dizer que o blog está sensacional! Abraaços!

    Notícia e blog disse...
    1 de setembro de 2009 12:26 #

    @Jonathan Hess Muito obrigado!!

    iraja disse...
    4 de janeiro de 2011 17:47 #

    Ola amigo como faço para colocar estas imagens no post?
    Não quero coloca-las como gadget

    Gabriel Cruz disse...
    13 de setembro de 2011 13:25 #

    Tem como colocar está galeria no post...se tiver faça um tutorial e entre em contato comigo.Mesmo assim foi bem interesante!

    Gabriel Cruz disse...
    14 de setembro de 2011 09:46 #

    As imagens não estão apareçendo,no começo achei que era o tamanho,mas não...peguei imagens pequenas mas não apareçeu do mesmo jeito;

    Beatriz Marks disse...
    17 de setembro de 2011 01:07 #

    Eu fiz tudo certinho, aparece somente as miniaturas, elas não aumentam ao passar o mouse em cima.

    O que deu errado? Tentei tanto no gadjet como no html de um a página adicionada no blogger.

    Oriom disse...
    2 de outubro de 2011 12:02 #

    @Beatriz Marks

    Estou com o mesmo problema, recebeu resposta?

    Thiago disse...
    3 de outubro de 2011 21:29 #

    Olá.
    Não sei se é o script mas o efeito não está mais funcionando,ou pelo menos não no meu blog.
    Sabe o que é?
    www.pilhado.com

    Postar um comentário

    Deixe seu comentário aqui
    Para exibir sua foto, escreva o seu comentário e clique em "Visualizar" e em seguida clique em "Adicionar Foto de Perfil"(Só é exibido quando o comentário é publicado como Conta do Google). Para editar seu perfil Clique aqui.