Kategoriler: Siteniz İçin

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 🙂

Rate this post
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.

Paylaş
Yazar
Furkan Özden

Son Gönderiler

T129 ATAK War Thunder’a Geliyor!

T129 ATAK, İtalyan A129 Mangusta taarruz helikopterinin yerli olarak modifiye edilmiş ve Türkiye tarafından Türk…

2 hafta önce

Android Hakkında 5 Şehir Efsanesi

Android işletim sistemi uzun süredir piyasada ve milyonlarca insan tarafından kullanılıyor. Doğal olarak, yıllar içinde…

4 hafta önce

Her Gün Uyandığınızda Nasıl Motive Olursunuz?

Pazartesi sabahı alarmınız çaldı. O anda nasıl motive olacağınızı biliyor musunuz? Gözlerinizi ilk açtığınızda aklınıza gelen düşünce nedir? Kalkıp…

1 ay önce

LearnPress ve TutorLMS Karşılaştırması

Mükemmel WordPress LMS eklentisini seçmek ciddi bir emek ister. Sitenizi belirlediğiniz eklenti ile kurduktan sonra…

2 ay önce

Teknolojik Gelişmelerin Türkçe’ye Olan Etkisi

Türkçe binlerce yıldır farklı coğrafyalarda yoğurulup, farklı kültürlerle harmanlanıp günümüze kadar geldi ve bugünkü halini…

2 ay önce

Trambolin Parkı Hediyesi Nereden Alınır?

Kim demiş, kanatsız uçamayız, diye! Trambolin gibi bir gerçek varken üstelik! Evet, bize uçuyor hissi…

3 ay önce