Bayram arefesinde size güzel bir makaleyle merhaba diyorum. Makalemizin konusu projelerimde severek kullandığım, basit ve kullanışlı bir Jquery eklentisi olan Thickbox. Eklentinin işlevini kısa bir cümleyle özetlemek gerekirse; tek bir resmi, çoklu resimleri veya başka dosyadan çağırılan bir içeriği AJAX metoduyla bir diyalog kutusunda gösterir ve bu kutuda işlem yapabilmenizi sağlar. Diyalog kutusunun ortaya çıkışı da artık alışmaya başladığımız önce ekranın kararması ve ardından kutunun görünmesi şeklinde. Daha önceden yazmış olduğum ytelefon uygulamasında bu eklentiden fazlasıyla faydalandım. Resimdeki gibi çalıştığını dilerseniz test sayfasında da görebilirsiniz.

Eklentimizi projemizde kullanmaya başlamak için öncelikle gerekli dosyaları ilgili sayfadan indirmeliyiz. Gerekli dosyalardan kastım jquery.js, thickbox.js, thickbox.css ve loadingAnimation.gif. Dosyalarımızı indirdikten sonra projemize dahil etme kısmına geçiyoruz. Bunun için de eklentinin kullanılacağı dosyanın < head >..< /head > etiketleri arasına şu kodları giriyoruz.

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="thickbox.js"></script>

<link rel="stylesheet" href="thickbox.css" type="text/css" media="screen" />

Gördüğünüz gibi iki adet js dosyasını ve bir css dosyasının sayfamıza ekledik. Buradan tüm dosyaların aynı dizinde olduğunu varsaydım. Eğer bir alt dizinde olacaklarsa src ve href kısımlarında bu alt dizini belirtmeyi unutmayın.

Ayrıca birde “yükleniyor” anlamına gelen loadingAnimation.gif dosyamızı aynı dizine attıktan sonra thickbox.js dosyasının en üst satırlarında resmin konumunu ayarlıyoruz. Yani şu satırı;

var tb_pathToImage = "images/loadingAnimation.gif";

Eğer yukarıda anlatılanları tam ve sorunsuz olarak yaptıysanız artık projenizde Thickbox’ı tam anlamıyla kullanabilirsiniz.

Thickbox’ı başka sayfadan bilgiler çağırmak yerine tek bir resim görüntülemek için de kullanabiliriz. Basit bir resmi bu eklentiyi kullanarak görüntülemek için tek yapmanız gereken resmi çağıracağınız bağlantıya (linke) class=”thickbox” eklemek.

<a href="resimler/resim_buyuk.jpg" title="Başlık" class="thickbox"><img src="resimler/resim_kucuk.jpg" alt="Tek Resim"/></a>
// veya
<a href="resimler/resim_buyuk.jpg" title="Başlık" class="thickbox">Resim için tıklayın</a>

Diyelimki tek bir resim değil de 3 adet resminiz var ve bir resim görüntülenirken altında diğer resme geçiş bağlantısı bulunsun. Böyle bir durumda vereceğimiz bağlantılara rel=”arabalar” gibi bir de galeri özelliği ekliyoruz.

<a href="resimler/resim1_buyuk.jpg" title="Başlık" class="thickbox" rel="arabalar"><img src="resimler/resim1_kucuk.jpg" alt="Tek Resim"/></a>
<a href="resimler/resim2_buyuk.jpg" title="Başlık" class="thickbox" rel="arabalar"><img src="resimler/resim2_kucuk.jpg" alt="Tek Resim"/></a>
<a href="resimler/resim3_buyuk.jpg" title="Başlık" class="thickbox" rel="arabalar"><img src="resimler/resim3_kucuk.jpg" alt="Tek Resim"/></a>

Şimdi biraz daha ilerliyoruz ve diyalog kutumuzda bir metin göstermek istiyoruz. Bir örnek üzerinden giderim ve bir sözleşmeyi kutuda göstermek isteyelim. Bu sefer önce kodu verip sonra açıklama yapacağım.

<a href="#TB_inline?height=155&width=300&inlineId=metin" class="thickbox">Sözleşme</a>
<div id="metin">Bu sözleşmeye göre şunlara uymalısınız vs. vs.</div>

Gördüğünüz gibi bu sefer bağlantının href özelliğine bir dizi değer verdik.
#TB_inline: Sayfadaki bir metni görüntüleyeceğimiz anlamına gelir.
height=155&width=300: Diyalog kutusunun ebatlarını belirtir.
inlineId=metin: Kutuda görüntülenecek olan nesnenin id’sini belirtir. Buna göre sayfadaki metin id’sine sahip nesnenin içeriği kutuda görüntülenir.

Bir üstteki örnekle devam edelim. Diyelim ki sözleşme koşulları sozlesme.htm isimli bir dosyada bulunsun. Thickbox ile kutu içinde bu şekilde başka bir dosyanın içeriğini görüntüleyebiliriz. Kodumuz:

<a href="sozlesme.htm?keepThis=true&TB_iframe=true&height=250&width=400" title="Sözleşme Metni" class="thickbox">Sözleşme</a>

Bu koddaki keepThis=true&TB_iframe=true çağırdığımız dosyanın kutudaki bir çerçeve (iframe) içinde açılmasını sağlar.

Konumuzun can alıcı noktası da burası. Artık bu kutu içine bilgiler çekmeye ve hatta devamında kutu içinde işlem yapmaya başlayacağız. Bu başlığın bir öncekinden farkı bu sefer çerçeve(iframe) kullanmayacağız. Bu işlem anlattığım başlıklar arsında inanın en basiti. Şöyle ki bir sayfayı direk şu şekilde çağırabiliriz.

<a href="sozlesme.htm?height=200&width=300" class="thickbox" title=""></a>

Sözleşme metninde bir bağlantı olduğunu ve bu bağlantının yine kutu içinde görünmesini istiyorsak metnin bulunduğu sozlesme.htm sayfasın yine aynı şekilde bir bağlantı (class=”thickbox” içeren) kullanabiliriz.

Daha gelişmiş bir örnek ise bu metodla bir kullanıcı girişi yapmak. ytelefon uygulamamda zaten bunu yaptığım için (yeni telefon girme kısmı) kodları tek tek anlatmayacağım fakat mantığını söyleyeyim. Çağırmış olduğunuz dosyadaki formun başka sayfaya bilgi göndermesini değil de AJAX kullanarak diğer sayfadan bilgi çekmesini sağlayın. Böylece kutu içinden hiç çıkmazsınız. ytelefon örneğinde yeni.php dosyasını ve js klasöründeki yakuter.js dosyasındaki ekle() fonksiyonunu inceleyin. Ne demek istediğimi daha rahat anlayabilirsiniz.

Burada bahsetmiş olduğum Thickbox eklentisinin güzel işlevinin yanı sıra sitesinde çok kullanış bir de örnekli yardım dokümanı bulunuyor. Ben o sayfadaki bilgileri sadeleştirip size vermeye çalıştım ve yazılı metin olarak makalemi tamamladım. Makaleyi pekiştirmesi açısından sayfayı ziyaret edip örneklere bakmanızı tavsiye ederim.

İyi bayramlar, iyi kodlamalar ;)

Benzer Yazılar

• AJAX’ta İki Terim “Prototype, Xajax”
• AJAX Ülke/Şehir Uygulaması
• 30 Saniyede Ajax Öğrenin
• IE ile W3C’nin CSS Kutu Modeli Farkı
• ytelefon | Yakuter Telefon Defteri Betiği