Galeria de imagens com jquery

Posted by Anônimo On sábado, 21 de maio de 2011 0 comentários

Que tal adicionar uma galeria de fotos no seu blog com o jQuery. Mas o que é jQuery?


Para ver um demo do script clique aqui
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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBUuJAr3-_LJMHDQsbAATKfM48ClWMliZnrakoPSvPvms_JVK9gxSjeh2deeVd3m4w2u7FHjdDKYRnY670fw6Wx46cNfmAiLaE9zHD1pfQWyz38ZdVYLHmLoEvdDJgGtgL6anVBURQB8L9/) 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>

Fonte: noticiaeblog.com

Postado por Anônimo às 21:52
Categorias:

0 comentários:

Postar um comentário

Os leitores são responsáveis pelos seus comentários postados neste site.

O Connect - Technology não se responsabiliza pelo conteúdo colaborativo apresentado e ainda se reserva ao direito de deletar, sem aviso ou consulta prévia, comentários com conteúdo ofensivo, palavras de baixo calão, spams ou, ainda, que não sejam relacionados ao tema proposto pelo post do blog ou notícia.