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

Etsy’de Satış Yapmak için Canva’yı Kullanma Rehberi

Canva, yeni başlayanlardan uzmanlara kadar uzanan dijital içerik oluşturucuların güzel tasarımlar oluşturabileceği bir platformdur. Bir…

2 ay önce

Tek Konulu ve Çok Konulu Bloglardan Para Kazanma

Genel olarak, trafik seviyesinin aynı olduğu varsayıldığında, tek bir konu blogu çok nişli bir blogdan…

2 ay önce

Para Kazanma Odaklı Blog Konusu Seçimi

İster tek konulu bir blog, ister çok nişli bir blog yazmaya başlayacak olun, ele alacağınız…

3 ay önce

Tek ve Çok Konulu Bloglar İçin Bloglama Giderleri

Blog yazmanın tek gerçek maliyeti, bir alan adı kaydettirmek ve barındırma için ödeme yapmaktır. Maliyetler tek konu…

3 ay önce

Tek Konulu ve Çok Konulu Blog ile Pazarlama Fikirleri

Pazarlama, hedef kitlenizi büyütmenize, trafiği artırmanıza ve içeriğinizi görmeyecek yeni okuyuculara ulaşmanıza yardımcı olur. Bir blog…

4 ay önce

Tek Konulu ve Çok Konulu Blog Yazmanın Artıları ve Eksileri

Artıları Bazı durumlarda içerik oluşturmak daha kolay ve daha hızlıdır - daha fazla içerik seçeneğiniz…

4 ay önce