Tek Seferde Tüm Resimlere rel=”lightbox” Kodu Ekleyin
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 🙂
ben de böyle bir kod arıyordum,sayenizde buldum.çok teşekkürler 🙂
bunu tam olarak yapmak güzel olacaktır
Beğenmenize sevindim bayağı bir blogger bunu arıyordu 🙂
Güzel Bilgi Olmuş. Sadece Lightbox için mi bu yöntem
Lightbox’dan başka alternatif var mı ki ?
iyiymiş beğendim ben fakat kullanmak sitemiyorum :d siteyi kasabilir
Emin ol kassa benim siteyi kasar 🙂
çok iyi bir bilgilendirme olmuş
Güzel bir yazı olmuş, teşekkürler.
Mantıklı bir açıklama olmuş gerçekten. Tek tek eklemek yerine hepsine birden eklemek en iyisi.
Bu kodla birçok kişi oh be demiştir herhalde 🙂
Wp Slimbox2 kurdum ama nedense galeri harici diğer fotoğraflarda çalışmıyor. Onlara eklemenin bir yolu yok mu acaba?
Bu Blogger için, WordPress’te çalışır mı bilmem 🙁
Furkan bir yerde hata var galiba çalışmıyor.
http://www.facematrax.com/2011/09/en-guzel-film-afisleri.html
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
çok saol 🙂 tek bir kodla tüm resimlerin olması çok güzel teşekkür ederim 🙂
Bende çalışmadı. Resim yine aynı sekmede kendi linkinde açılıyor. Sorun ne olabilir
kısmına hata veriyor düzeltemedim yardımcı olursanız sevinirim 😀
Hangi kısım?
yazmıyor script kodu kapanışı kısmı
merhaba, bilgiler için teşekkürler.
belirtilen css ve js dosyalarını nasıl bulacağız?
Yorumunuz için teşekkürler. Yazıyı güncelledim.