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 🙂

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

Bad Boys: Her Zaman Çılgın (2020) Film İncelemesi

Uyuşturucu kartelinin başında bulunan Armando Armas'ın yakalanması gerekmektedir. Ancak Armando soğukkanlı ve ünlü bir katildir.…

1 hafta önce

Terminatör: Kara Kader (2019) Film İncelemesi

Dani Ramos (Natalia Reyes) gelecekten gelen bir terminatör tarafından takip edilmektedir. Bir tarafta sıradan bir…

2 hafta önce

Aylık Araç Kiralamanın Püf Noktaları

Araç kiralama yapmak isteyen kişiler gerekli olan prosedürlerden haberdar olmalıdır. Çünkü her şoför araç kiralayamamaktadır.…

3 hafta önce

Dying Light (2015) Oyun İncelemesi

Dying Light, 2015 yılında Techland tarafından piyasaya sürülmüş birinci şahıs açılı bir zombi oyunudur. Dying…

1 ay önce

3 Maddede Akıllı Ev Kontrolü

Akıllı ev teknolojisi yaklaşık olarak 10 yıldır teknolojinin gündeminde olmasına rağmen, mobil ağının hızlanması ve…

1 ay önce

Google Chrome için Karanlık Mod Nasıl Etkinleştirilir?

Google Chrome, masaüstü ve mobil cihazlar için karanlık bir moda sahiptir. Ancak etkinleştirmek beklediğiniz kadar…

1 ay önce