Lightbox seçimi
Lightbox; popup veya mesaj kutusu benzeri, sayfa içinde açılan kutulara denir. Bu kutular sayfadaki diğer öğelerin üzerine kapsayacak şekilde tüm sayfayı belli oranda saydamlık verilerek kaplayan kutulardır. Lightbox sayfalarımıza estetik görsellik kazandırır.
Bir çok lightbox uygulaması mevcuttur. Ben bu lightbox uygulamalarından bazılarını denedim ve çeşitli sitelerde kullandım ve sonuçta birinde karar kıldım. Sırası ile denediğim genel lightbox kodları:
- prototype ve scriptaculous tabanlı en meşhur Lokesh Dhakar’ın yaptığı Lightbox 2.0
- Lightbox2.0′ın prototype.lite ve moo.fx. kullanılarak revize edilmiş daha küçük hali olan Litebox
- Lightwindow, prototype alt yapısını kullanıyor, bir çok yerde kullanılması güzel(flash, iframe, komutla), boyutu yüksek olması dez avantajı, ayrıca değiştirmeye pek eleverişli değil.
- Son olarak benim karar kıldığım mootools javascript kütüphanesi kullanılarak hazırlanan Slimbox
Diğer lightbox seçenekleri bana daha hantal ve üzerinden daha az oynama imkânı sağladığı için tercih etmedim. Slimbox’ın avantajları :
- Küçük boyutlu mootools javascript kütüphanesini kullanması.
- %100 doğrulanmış CSS kodu diğer lightboxlarda bu yok.
- Javascript kodu yerine CSS kodu ile değiştirebilme imkânı
- Diğer lightbox uygulamalarının aksine saydam png kullanmaması
- Kolay değiştirilebilir olması
Benim gibi site kodlayan arkadaşların bu tip hazır javascript kodlarından beklentisi uygulamayı kendi sitemize adapte ederken bize sağladığı kolaylıktır. Slimbox bu hususta diğerlerine göre daha avantajlı ve kullanışlı.
slimbox.js scripti bize kolay değiştirme imkanı sağlar 11. ve 17 satırdaki kodlar
- resizeDuration: Değişen genişlik ve yükseklik animasyonunun süresi, milisaniye cinsiden.
- resizeTransition: Geçiş efektinin aktif olup olamayacağı
- initialWidth: Kutunun başlangıçtaki genişlik değeri, piksel cinsiden.
- initialHeight:Kutunun başlangıçtaki yükseklik değeri, piksel cinsiden.
- animateCaption: Animasyon başlığı olsun mu olmasın mı?
- displayCounter: Resim galerisindeki sıralamayı göstersin mi göstermesin mi?
Bunun haricinde eğer javascript konusunda mürekkep yalamışsanız bir çok değişikliği yapabilirsiniz slimbox.js içerisinde.
Sonuç olarak başta dediğim gibi şimdiye kadar uyguladıklarımdan en çok beğendiğin Slimbox olduğu için bunu sizlere öneriyorum nacak zaman ne gösterir onu bilemem. Ayrıca sizinde uygulayıp memnun kaldığınız lightbox uygulamaları varsa onlarıda yazmanızı bekliyorum. Tabi avantajları ile birlikte yazarsanız memnun olurum.
Not: Bir uyarı eğer sayfa içinde z-index değeri içeren bir nesneniz varsa ve slimbox bu nesnenin altında kalıyorsa. slimebox.css da #lbCenter z-index değeri olarak 9999 verin
Kaynaklar
- http://particletree.com/features/lightbox-gone-wild/
- http://www.digitalia.be/software/slimbox
- http://www.artviper.net/test/ajaxslide/index.html (farklı bir uygulama şekli)
- http://clientside.cnet.com/cnet.gf/docs/files/common/3rdParty/Slimbox/slimbox-js.html (kaynak)
- http://scripts.ajaxflakes.com/category/lightbox/ (lightbox listesi)
- http://www.ajaxrain.com/tag.php?tag=popup&page=1 (lightbox listesi)
- http://jadedpixel.stikipad.com/design/show/A+Better+Lightbox (karşılaştırma)
- http://homepage.mac.com/yukikun/software/slimbox_ex/ (geliştirilmiş sildebox)
- http://www.chazzuka.com/blog/index.php?p=21& (karşılaştırma)
- http://www.phatfusion.net/lightbox/index.htm (slimebox farklılaştırılmış
lightboxu ie destekliyor mu acaba??
slimbox ile lightbox (phatfusion.net ‘deki) birbirinin çok benzeri. hangisi hangisinden esinlenmiş onu anlayamadım. css leri aynı hatta.. png bundada yok. slimbox mootools 1.2 kullanıyor ama diğeri 1.1 ile çalışıyor. css de next ve prev footer a almak için ekstra style ilave edilip var olan pasifleştirilmiş. slimbox kullanmayı düşündüm. ama slimbox daki next – prev footer a almak için diğerindeki css leri getirdim. extran bir style var.
#lbControls {display: block;
height: 32px;
}
bu konuda yardımcı olursanız sevinirim. yapmak istediğim Slimbox v1.63 de ileri geri mantığını aşağıda göstermek..
bende bir iki saattir bu konuda, araştırma yaptım yukarda fatih beyin örneklerinide bu sayfaya uğramadan incelemiştim.
slimbox güzel. yalnız resim üzerine gelince ileri geri olayları benim hoşuma gitmediği içinmi bilmiyorum farklı bişiler aradım biraz. yine mootools v1.1 kütüphanesini kullanan
http://www.phatfusion.net/multibox/ve
http://www.phatfusion.net/lightbox/iki modelde hoşuma gitti. css vebunlarda, ileri-geri yapmamızı sağlayan oklar göz önünde bir yerin üzerine gidince gözükmesi gerekmiyor. hep açık durumdalar bunu müşteri mantığında düşününce kullanışlı olduğunu…
slimbox da mesela resmin sağ sol marjlarına yaklaştığımızda next & prev çıkıyor. 4 dil bir sitede yön imagelerini değiştirmekle birlikte bağlı olduğu dosyalardaki isimleride değişmek gerekmetedir. buda acaba o kadar kastırdıktan sonra dosya yığını haline gelmiş bir den fazla js ve css mi olacak sorusuna itmedi değil.
multibox & lightbox ikiside bana uygun geldi. slimbox ile karşılaştırma yapmadım. %100 doğrulanmış CSS kodu varmı henüz test etmediğim için bir şey diyemem. ama bunun önemli olduğunu diğer yönleriyle slimbox dan geri kalır yanı yok eminim. bunlarla ilgili diğer arkadaşlarında yorumları varsa yazmalarını rica ederim.
Ahmetblog.net’e bakanlar bu işin sadece css ilede yapılabileceğini görürler.
Bu arada bende kendi sitemde(ogalican.com) Mootools ile yapımını anlattım. Meraklıları bakabilir.
İyi günler..
evet slimbox gerçekten de diğerlerine göre daha avantajlıymış
bence en başta validate olması ve saydam png kullanmaması geliyor
zaten erişilebilirlik konusunda mootools güzel bir kütüphane
teşekkürler
(şunu okumasam heralde uzun bir zaman daha lightbox 2.0 ile cebelleşirdim :) )
güzel bir çalışma olmuş .