Blogger Lightbox Image Viewer (+Jquery)

Dün şurada Masaüstüm adlı başlık da bloga entegre ettiğim "Lightbox Image Viewer"ı göstermiştim. Nasıl entegre edildiğini de şimdi anlatayım isterseniz.

Bu eklentiyi kullanabilmemiz için bize extradan javascript dosyamızı barındıracağımız bir host gerekiyor.

Ben bunun için files.myopera.com adresini kullandım.

Yine yazmadan geçmek istemediğim birşey var. Bu eklenti jquery için yazılmıştır. Yani Jquery olmadan bunu kullanamayız. Eklentinin "prototype framework"'ü için olan versiyonuda vardır. Dileyen onu da kullanabilir.

Öncelikle jquery'nin sıkıştırılmış halini include edelim.

HTML'yi düzenle kısmından </head> nin hemen üstüne aşağıdaki kodu yazın.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>


Şimdi şuradan download ettiğiniz "Lightbox Image Viewer" dan jquery.lightbox-0.5.js adlı dosyada bulunan image değişkenlerini kendinize göre düzenleyin.

// Configuration related to images
imageLoading:   'images/lightbox-ico-loading.gif', // (string) Path and the name of the loading icon
imageBtnPrev:   'images/lightbox-btn-prev.gif',   // (string) Path and the name of the prev button image
imageBtnNext:   'images/lightbox-btn-next.gif',   // (string) Path and the name of the next button image
imageBtnClose:  'images/lightbox-btn-close.gif',  // (string) Path and the name of the close btn
imageBlank:    'images/lightbox-blank.gif', 


Tavsiyem download ettiğiniz zip içerisinde images dizininde bulunan dosyaları imageshack.us gibi bir resim upload sitesine atın ve "jquery.lightbox-0.5.js" adlı dosyada gerekli yerleri değiştirin.

Bunu yapmamızın nedeni resim yollarının klasör şeklinde olmasıdır. Eğer resim yollarını değiştirmeseydik browserimiz resimleri blogger üzerinde arayacaktı(h4ckinger.org/images/lightbox-ico-loading.gif gibi). Blogger'da istediğimiz şekilde dosya barındırma gibi bir hizmet olmadığından resimleri imageshack.us sitesine upload ettik.

"jquery.lightbox-0.5.js" dosyasında gerekli değişiklikleri yaptıktan sonra hostumuza upload ediyoruz.

Not: Dosyanın boyutunu küçültmek için dilerseniz şu adresten javascript dosyasını sıkıştırabilirsiniz.

files.myopera.com a upload edecekseniz dosyanın uzantısını değiştirin(.txt yapabilirsiniz). Çünkü files.myopera.com .js,.php gibi uzantılara sahip dosyalara direk erişim sağlamıyor.



Javascript dosyamızı hostumuza upload ettikten sonra aşağıdaki kodları yine </head>'ın üstüne yazın.

<link rel="stylesheet" type="text/css" href="http://leandrovieira.com/projects/jquery/lightbox/css/jquery.lightbox-0.5.css" media="screen" />
<script src='http://site.com/jquery.lightbox-0.5.pack.js' type='text/javascript'/>


Ve son olarak belirlediğimiz div alanındaki resimlere lightbox efekti verecek olan aşağıdaki kodu </head>'ın üstüne yazın.
<script type='text/javascript'>
$(function() {
$('#.post-body%20entry-content  a.lightbox').lightBox({fixedNavigation:true});
});
</script>


Yukarıdaki koddaki 'post-body entry-content' yazılarımızı kapsayan div alanının adıdır. Benim temamda 'post-body entry-content' olarak geçiyor. Kaynak koddan bakarsanız demek istediğimi anlayabilirsiniz. Diğer temalara göre farklılıklar gösterebilir.

Lightbox efekti vermek istediğiniz resmi aşağıdaki şekildeki gibi ekleyin.