Jquery İle Galeri Oluşturma

By Adsız - 2 Şubat 2014 Pazar - 1 Comment

Bloggerların en çok aradıkları kodlarında biride Galeri oluşturma kodlarıdır özellikle bayanların kategori olarak tercih ettikleri moda ve galeri bloglarının daha çok aradıkları kodlardır. Blogger kullanıcılarına galeri oluşturma seçeneğini sunmamakta ve blogger temaları henüz o kadar gelişmediğinde galeri oluşturulamıyor durum böyle olunca blog sahipleri de çeşitli yöntemler kullanarak galeri oluşturmaya çalışıyorlar.Bizde blog sahiplerinin işine yarayacağını düşündüğümüz jQuery İle oluşturulan bu kodları sizinle paylaşmak istedik..
Kodları her yayın yaptığınızda kullanabilirsiniz.

Galeri Demosu için Tıklayınız

 <!--Bu çalışma Creative Commons Attribution-Gayriticari-NoDerivs 3.0 Unported Lisansı ile lisanslanmıştır.--><!--biribiziokuyor.com-->   
 <script src="https://biribiziokuyor-com.googlecode.com/svn/galeri.js" type="text/javascript"></script>  
 <script type="text/javascript">  
 $(document).ready(function(){  
 $("h2").append('<em></em>')  
 $(".Galeri a").click(function(){    
 var largePath = $(this).attr("href");  
 var largeAlt = $(this).attr("title");      
 $("#largeImg").attr({ src: largePath, alt: largeAlt });      
 $("h2 em").html(" (" + largeAlt + ")"); return false;  
 });    
 });  
 </script>  
 <style type="text/css">  
 #largeImg { border: solid 2px #52e052;  
 width: 530px; height: 350px; }  
 .Galeri img { border: solid 2px #52e052;  
 width: 100px; height: 100px; }  
 .Galeri img:hover { border-color: #FF9900; }  
 </style>  
 <br />  
 <h2>  
 Kemal Sunal Özel</h2>  
 <div class="Galeri">  
 <a href="http://i.hizliresim.com/Kr6mDa.jpg" title="RAHMETLE ANIYORUZ"><img src="http://i.hizliresim.com/Kr6mDa.jpg" /></a>  
 <a href="http://i.hizliresim.com/Kg24G0.jpg" title="RAHMETLE ANIYORUZ"><img src="http://i.hizliresim.com/Kg24G0.jpg" /></a>  
 <a href="http://i.hizliresim.com/KPnYVd.jpg" http:="" i.hizliresim.com="" nyvd.jpg="" title="RAHMETLE ANIYORUZ&gt;&lt;img src="></a>  
 <a href="http://i.hizliresim.com/e77VLL.jpg" title="RAHMETLE ANIYORUZ"><img src="http://i.hizliresim.com/e77VLL.jpg" /></a>  
 <a href="http://i.hizliresim.com/wLZYrz.png" title="biribiziokuyor.com"><img src="http://i.hizliresim.com/wLZYrz.png" /></a>  
 <a href="http://i.hizliresim.com/Kr6mDa.jpg" title="RAHMETLE ANIYORUZ"><img src="http://i.hizliresim.com/Kr6mDa.jpg" /></a>  
 </div>  
 <img alt="alt görsel" src="http://i.hizliresim.com/Kg24G0.jpg" id="largeImg" /><br />  
 <div class="Galeri">  
 <a href="http://i.hizliresim.com/Kg24G0.jpg" title="RAHMETLE ANIYORUZ"><img src="http://i.hizliresim.com/Kg24G0.jpg" /></a>  
 <a href="http://i.hizliresim.com/KPnYVd.jpg" title="RAHMETLE ANIYORUZ"><img src="http://i.hizliresim.com/KPnYVd.jpg" /></a>  
 <a href="http://i.hizliresim.com/e77VLL.jpg" title="RAHMETLE ANIYORUZ"><img src="http://i.hizliresim.com/e77VLL.jpg" /></a>  
 <a href="http://i.hizliresim.com/Kr6mDa.jpg" title="RAHMETLE ANIYORUZ"><img src="http://i.hizliresim.com/Kr6mDa.jpg" /></a>  
 <a href="http://i.hizliresim.com/wLZY60.jpg" title="RAHMETLE ANIYORUZ"><img src="http://i.hizliresim.com/wLZY60.jpg" /></a>  
 </div>

Galeri Hakkında* Kod içerisindeki kırmızı ile gösterilen alt görsel Yazısında sonra gelen Görsel url'leri galerinin alt görselleridir.

* Kod içerisinde Sarı ile gösterilen 2 görsel url'si tek bir görsel url'sidir. Galeri de kullanacağınız görsel url'lerini 2 defa yapıtırınız

Özelleştirme
Kod içerisinde kırmızı ile gösterilen Kemal Sunal Özel yazısı Galeri adıdır
Kod içerisinde mavi ile gösterilen Rahmetle Anıyoruz yazısı Görsellerin açıklamasıdır.

Bu çalışma DMCA ve Creative Commons Attribution-Gayriticari-NoDerivs 3.0 Unported Lisansı ile lisanslanmıştır.KAYNAK GÖSTERİLMEDEN çoğaltılamaz ve paylaşılamaz

News Ticker

Jquery İle Galeri Oluşturma

Share This:

Post Tags:

BiriBizi Okuyor

Sosyal Link:

1 yorum to ''Jquery İle Galeri Oluşturma"