Gönderilme Tarihi: 08 Mayıs 2010 19:58:35
Bi arkadaşın önerisi üzerine Sendetıklat'ta resim eklenen yazılarda resimleri galeri şekline getirip slayt gösterisi halinde sunmaya karar verdim. Yani birisi yazdığı yazısına bir resim eklediyse bu resmin küçük hali görünecek ve üzerine tıklatılınca resim aynı sayfa içerisinde büyütülüp gösterilecek(Tabi ekranın büyüklüğü yettiği kadar). Resme tıklanınca yeni bir pencere falan açılmayacak. Son derece kullanışlı birşey ayrıca baya bi havalı duruyur
Kendisine teşekkür ediyorum astırmaadamı bunu başka sitelerde görmüş olacak ki Sendetıklat'ta da olmasını istemiş. Bende dün site yazılımını 1.2.5 sürümüne güncellemeden önce gözüm yapılacaklar listeme ilişti. Orda astırmaadamı'nın önerisini görünce aklıma şöyle birşey geldi:
Sendetıklat Web İçerik Yönetim Uygulaması'nda JQuery ismindeki javascript kütüphanesini zaten kullanıyordum. Ve JQuery için mutlaka bu tür slayt işlerini yapacak bir eklenti yazılmıştır diye düşündüm.
Burda derdimi anlatabilmem için JQuery'den de biraz bahsetmem gerekiyor. JQuery ücretsiz bir javascript kütüphanesi. "Write less do more" sloganıyla yola çıkmış ve dediğini de başarmış bir uygulama. Bu söze "Az yaz çok iş yap" gibi bir manaya geliyor. Yani JQuery web yazılımcılarının işini kolaylaştıracak bir kütüphane. Ve özellikle benim gibi tek başına çalışanların
Az kod yazarak çok iş yapabiliyorsunuz. Çünkü bazı rutin işleri birileri sizin yerinize yapmış oluyor.
Kısa bir google araması(yaklaşık olarak 0,11 saniye) sonucunda prettyPhoto ismindeki JQuery eklentisini(plug-in) buldum. Bu eklentiyi yazan kimse benim yerime bu galeri oluşturma ve slayt olarak gösterme işlemleri için gereken kodları yazmış. Bana sadece bunu kendi sistemine uyarlamak kaldı. Yarım saat içinde bu işi halledip yeni sürüme eklemiş oldum yani.
Şimdi bu prettyPhoto eklentisinin nasıl kullanılacağını anlatayım:
1) Öncelikle şurdan 2.5.6 sürümünü indirin. Ben 2.5.6 sürümü için anlatımımı yapacağım. Son sürüm için gözünüz eklentinin sayfasında olsun.
Bu indirdiğiniz paket içerisindeki index.hmtl'yi açarsanız bir örnek olduğunu görürsünüz. Bu paketin içindeki tüm dosyalar bize lazım değil. Lazım olanları alıp kendi sitemize ekleyeceğiz.
Tüm işlemlerden önce sizin kendi sitenizde hangi sayfalarda bu slayt sistemini kullanacaksanız o sayfaların <head></head> takıları arasında şunları yazmanız gerekir.
<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" href="css/prettyPhoto.css" type="text/css" media="screen" charset="utf-8" />
<script src="js/jquery.prettyPhoto.js" type="text/javascript" charset="utf-8"></script>_
Yukarıdaki kodlarda gördüğünüz jquery.js dosyasını şuradan indirebilirsiniz. (Yine son sürüm için sitesine bakınız.)
prettyPhoto.css ve jquery.prettyPhoto.js dosyalarını ise indirdiğiniz pakette bulabilirsiniz.
Bu 3 dosyayı sitenizin dizinine kopyaladıktan sonra yukarıdaki kodları dosyaların yollarına göre değiştirin.
2) Daha sonra prettyPhoto.css dosyasını açın içerisinde resim yollarının "../images/prettyPhoto/" şeklinde başladığını göreceksiniz. Siz indirdiğiniz paket içerisinde images klasörü içine girin ve prettyPhoto klasörünü kendi sitenizin klasörüne alın. Daha sonra "../images/prettyPhoto/" yazan yerleri ona göre değiştirin. Mesela "http://www.site.com/images/prettyPhoto/" gibi... İşlemi hızlı yapmak için metin düzenleyicinizin(text editor) değiştir(replace) özelliğini kullanabilirsiniz.
3) Sonra <body> etiketinden hemen sonra <script type="text/javascript" charset="utf-8">
$(document).ready(function(){
$("a[rel^='galeri']").prettyPhoto();
});
</script>_ kodlarını ekleyin. Kodların içinde gördüğünüz galeri kelimesi yerine istediğiniz bir şey yazabilirsiniz.
4) Bu işlemden sonra galeri oluşturma işlemine geldi sıra.
Normalde sitenize resimleri şöyle eklersiniz. <a href="resmin büyük hali">
<img src="resmin küçük hali" border="0" />
</a> _
<a rel="galeri" href="resmin büyük hali">
<img src="resmin küçük hali" border="0" />
</a> _
Yapacağımız işler sadece bu kadar. Her rel="galeri" dediğimiz yer ayrı bir galeri olarak işlem görür. Birkaç resmi bir galeride toplayıp ileri geri şeklinde slayt olarak gösterilmesini istiyorsak rel="galeri[1]" gibi bir etiket kullanmak gerekir. "1" yerine istediğiniz şeyi yazabilirsiniz. Tek yapmanız gereken aynı galeride olacaklara aynı rel değerini vermek. Yani şöyle:
<a rel="galeri[1]" href="resim 1 büyük hali">
<img src="resim 1 küçük hali" border="0" />
</a>
<a rel="galeri[1]" href="resim 2 büyük hali">
<img src="resim 2 küçük hali" border="0" />
</a> _
Bu şekilde istediğiniz kadar galeri oluşturabilirsiniz.
| 
Anasayfa > Tüm İçerikler > İnternet > Web Yazılımcılığı > Javascript > JQuery'de Lightbox Kullanarak Sayfadaki Resimleri Slayt Şeklinde Gösterme
Sayfalar: 
Ara
