Lightbox uygulamaları sitenizdeki resimleri bir kaç hazır kod satırı ile görsel bir şekilde gösteren javascript kütüphaneleri ile hazırlanmış uygulamalardır. Hemen bu örnekle olayı anlatalım. Tabiki burdaki örnekten çok daha görsel ve kullanışlı uygulamalar mümkün. Şimdi böyle resim galerilerinin nasıl oluşturulduğunu anlatalım. Lightbox uygulamalarında en çok kullanılan uygulama bu adresteki kullanım.
Lightbox uygulamalarında yapılacak işlemler genellikle benzerdir. Sırasıyla, uygulamanın CSS dosyası ve javascript dosyaları resimlerin gösterileceği sayfaya dahil edilir ve linkin rel veya class özelliğine lightbox uygulamasına göre değer verilir. Hemen bu adresteki kullanımın nasıl olduğunu görelim. İlk olarak lightbox uygulamamızda kullanacağımız CSS, javascript, image dosyalarını şu adresten indirelim. İndirdiğimiz dosyada lightbox uygulamasının Javascript dosyaları(js klasörü içinde), CSS dosyaları (css dosyaları) ve resimleri(Kapat,ileri,geri vs. butonları) bulunmakta. Şimdi yapacağımız tek şey verilen kodları ilgili yerlere kopyalamak.
1- Uygulamanın çalışması için gerekli javascript dosyalarını aşağıdaki kod satırlarıyla resimlerin olduğu sayfaya dahil ediyoruz. Bu kodları <head></head> etiketleri arasına yazıyoruz.
<script type=”text/javascript” src=”js/prototype.js”></script>
<script type=”text/javascript” src=”js/scriptaculous.js?load=effects,builder”></script>
<script type=”text/javascript” src=”js/lightbox.js”></script>
2- Şimdi Lightbox uygulamasının CSS dosyasını sayfamıza dahil edelim.
<link rel=”stylesheet” href=”css/lightbox.css” type=”text/css” media=”screen” />
3- Son olarak resim linkinin rel özelliğine lightbox yazıyoruz. Bu kullanım tek gösterilecek resimler için uygun.
<a href=”images/image-1.jpg” rel=”lightbox” title=”my caption”>image #1</a>
4- Eğer resimleri galeri şeklinde yani ileri geri ilerleyebilecek tarzda göstermek istiyorsanız rel özelliğini aşağıdaki gibi yapmalısınız.
<a href=”images/image-1.jpg” rel=”lightbox[roadtrip]“>image #1</a>
<a href=”images/image-2.jpg” rel=”lightbox[roadtrip]“>image #2</a>
<a href=”images/image-3.jpg” rel=”lightbox[roadtrip]“>image #3</a>
Bu kullanımla tüm resimler arasında ileri geri butonlarıyla geçiş yapabiliriz. Tüm bunlarda dikkat edeceğimiz bir nokta da sayfaya dahil ettiğimiz dosyaların yollarının doğru yazılması.
Bu lightbox uygulamasında prototype javascript kütüphanesi kullanılıyor. Birde şu an oldukça revaçta olan Jquery isimli javascript kütüphanesi var. Jquery ile yapılmış lightbox uygulamalarını daha çok seveceksiniz. Aşağıda Jquery kullanan lightbox uygulamaları var. Bu uygulamalarda aynen yukarıdaki mantıkla kullanılabiliyor.
4- prettyphoto
Mayıs 17th, 2010 at 15:59
Çok güzel bir anlatım olmuş tüm gün en 15 sitede aynı script için aynı kodlamalarla açıklamalar gördüm ama en güzel açık ve net şekilde bu yorumdu tebrik ediyorum.
Mart 22nd, 2011 at 09:59
Bu uygulamayı Flash as2 ile yapılmış bir siteye nasıl entegre edebilirim ?
Bu konuda yardımcı olursanız çok sevinirim.
Saygılar…