2000li yılların ilk başlarında yaşadığımız popup kabuslarından sonra popup engelleyici programların çoğalması ile yazılımcılar yeni arayışlara başladılar. Asıl amacı yeni nesil bir popup gösterici olmasa da, birçok yazılımcı için 2006 yılında Lokesh Dhakar‘ın hazırladığı lightbox fotogaleri uygulaması sadece fotogaleriler için yeni bir dönemi değil aynı zamanda popuplar ve websitesi uygulamaları için kullanılmaya başlayacak bir çok uyarı, tanıtım ve işlem pencerelerinin de hazırlanmasına öncülük etti.
İlk lightboxtan beri çeşitli javascript kütüphanelerine bağlı çalışan ya da bağımsız bir kod altyapısı olan onlarca benzeri hazırlandı. Bu uygulamalarının hepsinin ise temel bir ortak amacı vardı, resim göstermek. Zamanla, resim göstermenin de ötesine giden uygulamalar ortaya çıktı ve artık tüm işinizi “modal window” dediğimiz bu pencerelerde görmeye başladık. Pencelerin ortak özelliklerini sıralayacak olursak, basit versiyonlarında, resim gösterimi, önceki-sonraki butonları yardımıyla resimler arasında hareket etme, resim açıklama yazıları, açıldığında sayfada herşeyin üzerinde bulunma ve transparan bir arka plana sahip olma. Gelişmiş versiyonlarında ise, resmin yanı sıra, yazı, ajax içeriği, flash animasyonlar ve video dosyalarının gösterimleri yapılabildiği gibi, mesaj gönderimi, üye girişi ekranı gibi form tabanlı işlemleri de yapabiliyorlar.
Bu yazı serimizde, bilinen javascript kütüphaneleri bağımlı ve kütüphane bağımsız olarak ile hazırlanmış bu lightbox uygulamalarını inceleyeceğiz. Serimizin ilk yazısında, jQuery kütüphanesi kullanılarak hazırlanmış lightbox uygulamalarını inceliyoruz.
CeeBox güzel hazırlanmış eklenti yapısıyla projeleriniz için oldukça fazla özelleştirme imkanı sağlıyor. Resimlerin yanında, yazı, iframe, ajax, flash ve video dosyalarını gösterebiliyor. Flash animasyonlarını göstermek için sayfanıza ayrıca swfobject eklentisini de eklemeniz gerekiyor.
ColorBox da CeeBox gibi geniş bir özelleştirme imkanına sahip, ayrıca fotoğraf pencere geçişleri için de jQuery easing eklentisine bağımlı olarak geniş bir geçiş efekti seçeneği sunuyor. Hemen hemen yukarıda saydığımı tüm içerikleri gösterebilen ColorBox da ayrıca uygulama ile gelen geğişik arayüz seçenekleri de bulunuyor.
Facebox, FaceBook sitesinde bolca karşımıza çıkan modal penceresinin bir klonu. İçerik olarak sadece resim, yazı ve ajax gösterebiliyor.
Cabel Sasser’in hazırladığı FancyZoom uygulamasının jQuery uyarlaması. Resim, flash ve yazı gösterimi yapabiliyor. Galeri resimleri arasında geçiş yapabilme özelliği bulunmuyor.
FancyBox flash gösterme özelliği olmayan ama galeri resimleri arasında değişik geçiş şekillerine imkan tanıyan güzel bir uygulama.
Greybox Redux, orjina Greybox uygulamasını jQuery için çok basite indirgenmiş hali. O kadar indirgenmiş ki, içerik olarak iframe dışında birşeygösteremiyor.
Imagebox, orjinal Lightbox’ın birebir kopyalarından biri, pencere içeriğinde sadece resim gösterebiliyor.
jQuery Lightbox, Lokesh Dhakar’ın Lightbox2’sinin jQuery versiyonu. İçerik olarak sadece resim gösterebiliyor.
nyroModel, en gelişmiş modal pencerelerin biri. Her türlü içeriği gösterebildiği gibi, ekstra bir eklentiye ihtiyaç durmadan form gönderme işlemlerini de yapabiliyor.
piroBox, diğer lightbox uygulamarından farklı olarak, penceresinde gösterdiği resmin bağlantısını da penceresine ekliyor böylece isterseniz resmi modal penceresi dışında da kolayca görebiliyorsunuz. Uygulama ile beraber gelen üç tane teması ve otomatik geçiş özelliğine sahip slideshow gösterimi en büyük artısı olmasına rağmen, modal penceresi dışına tıkladığımda kapanmaması bence en büyük eksikliği.
prettyPhoto da her türlü içeriği gösterebilen lightboxlardan. Ayrıca uygulama ile standart olarak gelen 5 farklı arayüz teması da bulunuyor ama temaların birbirlerinden çok büyük farklılıkları yok ne yazık ki.
Sexy Lightbox2 hem jQuery hem de MooTools versiyonları olan tek lightbox. Siyah ve beyaz olarak iki farklı arayüzü bulunuyor. Ayrıca açılan pencereler sayfanın ortasında belirmek yerine yukarıdan aşağıya kayarak sayfaya giriyor.
Slightly ThickerBox da Cody Lindley’s Thickbox uygulamasını bir klonu. İçerik olarak ajax ve resim gösterebiliyor.
Thickbox en eski jQuery lightboxlarından biri. Uygulamanın şu sıralar geliştirilmesi ve güncellenmesi şu sıralar durdurulmuş durumda.
TopUp jQuery’nin yanı sıra jQueryUI kütüphanesine de bağımlı bir lightbox. Değişik ve güzel arayüz seçenekleriyle çok şık görünmesinin yanında, içerik olarak yine yukarıda saydığımı tüm içerik türlerinin yanına, flv video dosyalarını da gösterebilmesi ile diğerlerinin arasında sıyrılıyor.
yollanıyor, lütfen bekleyiniz..Bilal eline sağlık çok güzel bir derleme olmuş. Kendi firmamızın sitesini yaparken Google Maps’in gösteriminde böyle birşey kullanacaktım ki hiç araştırmaya gerek kalmadı. Alıp herhangi birini kullansam olur
Bir ara bende bunla ilgili bir yazı yazmıştım belki arkadaşlara ufak bir kaynak olabilir.
Çok güzel bir derleme. Teşekkürler.
Devamı gelecek bu konu üzerine yaptığımız incelemelerin. Bu arada, bu yazının ingilizcesinin yayınlandığı Woorkup daki yorumlarda, shadowbox’ı unuttuğumu farkettim, eklentinin adresi http://www.shadowbox-js.com
Teşekkrler, aradığım bir bilgiydi. Umarım devamını getirirsiniz:)