Agosto 2009

Galeria de imagens com jquery

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

Inscrever-se

Publicidade

Siga-nos

Tags

Comentários Recentes

Seguidores

Twitter

Top comentaristas

Arquivo