Tek Seferde Tüm Resimlere rel=”lightbox” Kodu Ekleyin

tum resimlere lightbox kodu ekleme

Sitesine lightbox ekleyenlerin ilk başta güzel olduğunu düşündüğü, ama iş resimlere tek tek kod ekleme işine gelince uff dediği eklenti, şimdi öncelikle sitenizde lightbox eklentisi varsa silin hepsini baştan yapacağız adam gibi yapacağız. Temamızda aşağıdaki kodu buluyoruz.

<head>
Bu koddan sonra aşağıdaki kodları olduğu gibi ekliyoruz.
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/>
<style type="text/css">
/* jQuery lightBox plugin - Gallery style */
#gallery {
background-color: #444;
padding: 10px;
width: 520px;
}
#gallery ul { list-style: none; }
#gallery ul li { display: inline; }
#gallery ul img {
border: 5px solid #3e3e3e;
border-width: 5px 5px 20px;
}
#gallery ul a:hover img {
border: 5px solid #fff;
border-width: 5px 5px 20px;
color: #fff;
}
#gallery ul a:hover { color: #fff; }
</style>
<script src="https://cdn.rawgit.com/furkanozden/bloggerlightbox/29e71c6f/jquery.lightbox-0.5.js" type="text/javascript"/>
<link href="https://cdn.rawgit.com/furkanozden/bloggerlightbox/29e71c6f/jquery.lightbox-0.5.css" media="screen" rel="stylesheet" type="text/css"/>
<script type="text/javascript">
$(function() {
$('a[href$=jpg], a[href$=JPG], a[href$=jpeg], a[href$=JPEG], a[href$=png], a[href$=gif], a[href$=bmp]:has(img)').lightBox();
});
</script>

Tamam bitti bu kadar 🙂 Bu kadar basitti yani 🙂 Şimdi geri kalan tek şey mavi ile belirttiğim .js, .css vs. ile biten linkleri bilgisayarınıza kaydedip kendi bildiğiniz sunucuya yüklemeniz. Dosyalar normalde github’a yüklü sorun çıkmaz ama yine de bir yere not alın. Son olarak da eğer ki kodda sıkıntı yaşarsanız kırmızı yeri aşağıdaki kodla değiştiriniz.

<script type="text/javascript">
$(function() {
$('a').each(function(){
this.href = this.href.replace('s1600-h', 's1600');
});
$('a[href$=jpg], a[href$=JPG], a[href$=jpeg], a[href$=JPEG], a[href$=png], a[href$=gif], a[href$=bmp]:has(img)').lightBox();
});
</script>

Sağlıcakla kalın 🙂

Tek Seferde Tüm Resimlere rel=”lightbox” Kodu Ekleyin

Furkan Özden

Blog dünyası ile 2009 yılında tanıştım. Bloğumda haftada en az bir yazı yayımlıyorum. Yazdığım yazıları beğendiyseniz beni Twitter'dan (@frknzdn) takip edebilirsiniz. Daha fazlası için hakkımda sayfasını ziyaret edin.

23 Cevaplar

  1. eybat dedi ki:

    ben de böyle bir kod arıyordum,sayenizde buldum.çok teşekkürler 🙂

  2. ErenKeskin.com dedi ki:

    bunu tam olarak yapmak güzel olacaktır

  3. Furkan ÖZDEN dedi ki:

    Beğenmenize sevindim bayağı bir blogger bunu arıyordu 🙂

  4. Srp dedi ki:

    Güzel Bilgi Olmuş. Sadece Lightbox için mi bu yöntem

  5. Furkan ÖZDEN dedi ki:

    Lightbox’dan başka alternatif var mı ki ?

  6. Kubilay Cenk dedi ki:

    iyiymiş beğendim ben fakat kullanmak sitemiyorum :d siteyi kasabilir

  7. Furkan ÖZDEN dedi ki:

    Emin ol kassa benim siteyi kasar 🙂

  8. android dedi ki:

    çok iyi bir bilgilendirme olmuş

  9. Sinan YORULMAZ dedi ki:

    Güzel bir yazı olmuş, teşekkürler.

  10. future dedi ki:

    Mantıklı bir açıklama olmuş gerçekten. Tek tek eklemek yerine hepsine birden eklemek en iyisi.

  11. Furkan ÖZDEN dedi ki:

    Bu kodla birçok kişi oh be demiştir herhalde 🙂

  12. Tuğçe dedi ki:

    Wp Slimbox2 kurdum ama nedense galeri harici diğer fotoğraflarda çalışmıyor. Onlara eklemenin bir yolu yok mu acaba?

  13. Furkan ÖZDEN dedi ki:

    Bu Blogger için, WordPress’te çalışır mı bilmem 🙁

  14. Anonymous dedi ki:

    Furkan bir yerde hata var galiba çalışmıyor.

    http://www.facematrax.com/2011/09/en-guzel-film-afisleri.html

  15. facematrax dedi ki:

    Tamam şimdi oldu Furkan alt koddaki amaç fotoğrafların bulunduğu klasörü belirmek yani s1600-h ve s1600 klasörleri bloggerdaki resim klasörleridir. Örnek fotoğraf adresi:http://1.bp.blogspot.com/-NGzkMzfIFmQ/Tny7zXczP3I/AAAAAAAAAGc/FBiitpmsV10/s1600/resim.jpg

  16. Kerem Zor dedi ki:

    çok saol 🙂 tek bir kodla tüm resimlerin olması çok güzel teşekkür ederim 🙂

  17. Kül Tigin dedi ki:

    Bende çalışmadı. Resim yine aynı sekmede kendi linkinde açılıyor. Sorun ne olabilir

  18. Asena dedi ki:

    kısmına hata veriyor düzeltemedim yardımcı olursanız sevinirim 😀

  19. pelinozay dedi ki:

    merhaba, bilgiler için teşekkürler.
    belirtilen css ve js dosyalarını nasıl bulacağız?

Bir Cevap Yazın

%d blogcu bunu beğendi: