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="http://dinhquanghuy.110mb.com/lightbox/jquery.lightbox-0.5.js" type="text/javascript"/>
<link href="http://dinhquanghuy.110mb.com/lightbox/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 .js, .css vs. ile biten linkleri bilgisayarınıza kaydedip kendi hostunuza yükleyin sağlam olsun yani onun bunun hostuna bağlı kalmayın. Son olarakta yukarda en aşağıdaki yazdığım yeri bir forumda facematrax adlı arkadaşım açıkladı eğer ki koddası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 :)
YanıtlaSilbunu tam olarak yapmak güzel olacaktır
YanıtlaSilBeğenmenize sevindim bayağı bir blogger bunu arıyordu :)
YanıtlaSilGüzel Bilgi Olmuş. Sadece Lightbox için mi bu yöntem
YanıtlaSilLightbox'dan başka alternatif var mı ki ?
YanıtlaSiliyiymiş beğendim ben fakat kullanmak sitemiyorum :d siteyi kasabilir
YanıtlaSilEmin ol kassa benim siteyi kasar :)
YanıtlaSilçok iyi bir bilgilendirme olmuş
YanıtlaSilGüzel bir yazı olmuş, teşekkürler.
YanıtlaSilMantıklı bir açıklama olmuş gerçekten. Tek tek eklemek yerine hepsine birden eklemek en iyisi.
YanıtlaSilBu kodla birçok kişi oh be demiştir herhalde :)
YanıtlaSilWp Slimbox2 kurdum ama nedense galeri harici diğer fotoğraflarda çalışmıyor. Onlara eklemenin bir yolu yok mu acaba?
YanıtlaSilBu Blogger için, Wordpress'te çalışır mı bilmem :(
YanıtlaSilFurkan bir yerde hata var galiba çalışmıyor.
YanıtlaSilhttp://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
YanıtlaSilçok saol :) tek bir kodla tüm resimlerin olması çok güzel teşekkür ederim :)
YanıtlaSilBende çalışmadı. Resim yine aynı sekmede kendi linkinde açılıyor. Sorun ne olabilir
YanıtlaSil