Animasyonlu Galeri ile Resimlerinizi Sergileyin

Blogunuzdaki resimleri müthiş bir resim-galerisi ile sergilemek isterseniz bu yazıyı mutlaka okumalısınız.Sadece 2 adımda herkesin rahatlıkla bloguna ekleyebileceğiJQuery/Javascript ile hazırlanmış, çok cazip olan eklentiyi blogunuza widget olarak ekleyip, görünmesini istediğiniz yerde sergileyebilirsiniz.Galeriden biraz bahsedecek olursak,Üzerine geldiğiniz resim animasyonlu olarak,göze hoş gelecek bir hareketle zoomlanarak büyüyecek ve resme tıkladığınızda ziyaretçiyi resim için vermiş olduğunuz linke  yönlendirecek. Sözü fazla uzatmadan blogunuza resim galerisi eklemeyi 1. adımla anlatmaya başlıyalım.DEMO GÖRÜNÜM İÇİN TIKLAYIN.

/* Blogger Zoom Gallery By Blogokulu.blogspot.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 */ } 

<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> 

<ul class="thumb"> <li><a href="URL-1"><img src="1.Resim Linkiniz" alt="" /></a></li> <li><a href="URL-2"><img src="2.Resim Linkiniz" alt="" /></a></li> <li><a href="URL-3"><img src="3.Resim Linkiniz" alt="" /></a></li> <li><a href="URL-4"><img src="4.Resim Linkiniz" alt="" /></a></li> </ul> 

<li><a href="URL"><img src="Resim Linkiniz" alt="" /></a></li>