Jquey ve Thickbox Eklentisi ile İçeriği Diyalog Kutusunda Gösterme

Bu dersimizde Facebook ve bir çok sitede karşımıza çıkan ekranın kararması ile sayfanın ortasında açılan diyalog kutularının nasıl oluşturuluduğunu göreceğiz.

Merhaba arkadaşlar,

Bu dersimizin konusu, Facebook ve birçok sitede karşımıza çıkan, ekranın kararması ile sayfanın ortasında açılan diyalog kutuları. Resim, metin, video vb. içerikleri bu diyalog kutularında gösterek sayfamızı daha işlevsel bir duruma getirebiliriz. Bu diaolog kutularını oluştururken Jquery kütüphanesinin thickbox isimli eklentisinden yararlanacağız.



Bu diyalog kutularının nasıl çalıştığını Test Sayfası'na tıklayarak görebilirsiniz.

İlk olarak eklentinin sayfaya nasıl dahil edildiğini görelim.Eklentiyi sayfamızda kullamak için gerekli dosyaları (jquery.js, thickbox.js, thickbox.css, loadingAnimation.gif) indirmeniz gerekiyor. Dosyaları indirdikten sonra uygulamayı çalıştıracağımız dosyanın head tagları arasına şu kodları yazıyoruz.


<head>

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

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



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

</head>


Bununla beraber sayfaların yüklenmesi sırasında bir preloader göstermek için thickbox.js dosyasındaki var tb_pathToImage = "images/loadingAnimation.gif"; satırını değiştirmeniz gerekiyor.


Resim Görüntüleme


Thickbox diyalog kutularında tek bir resim görüntülebileceğimiz gibi çoklu resimlerde görütüleyebiliriz.Tek bir resim görüntülemek için resmi çağırdığımız bağlantı koduna class="thickbox" eklemeliyiz.


<a href="resim.jpg" class="thickbox" title="Resimler">Resim için tıklatınız</a>



Eğer çoklu resim örneğin bir fotoğraf albümü görüntülemek istiyorsak yapmamız gereken sayfaya resimlerin küçük hallerini yerleştirip bu resimlere verilen bağlantıya rel="Fotoğraf Albümü" kodunu eklemek.


<a href="buyuk_resim1.jpg" class="thickbox" title="Resimler" rel="Fotoğraf Albümü"><img src="kucuk_resim1"></a>



<a href="buyuk_resim2.jpg" class="thickbox" title="Resimler" rel="Fotoğraf Albümü"><img src="kucuk_resim2"></a>



<a href="buyuk_resim3.jpg" class="thickbox" title="Resimler" rel="Fotoğraf Albümü"><img src="kucuk_resim3"></a>



Diyalog Kutusu İçerisine Sayfa Çağırma


Diyalog kutusu içerisinde başka sayfada bulunan bir içeriği gösterebiliriz.Örneğin üyelik sistemi için uyelikkosullari isimli bir sayfamız olsun bu sayfayı kutuda görüntülemek için yazmamız gereken kod şu şekilde:


<a href="uyelikkosullari.htm?keepThis=true&TB_iframe=true&height=300&width=500" title="Üyelik Koşulları" class="thickbox">Üyelik Koşulları</a>



Burada keepThis=true&TB_iframe=true kodu, çağırılan sayfanın (uyekosullari.htm) bir iframe içerisinde gösterilmesini sağlar.

Bunun yanında çağrılan sayfadaki (uyekosullari.htm) bir bağlantının çağırdığı sayfayı' da aynı şekilde bu kutuda görüntüleyebilirsiniz. Bunun için uye kosullari.htm dosyasında üsteki kodun aynısını (sadece sayfa ismini değiştirerek) yazmamız yeterlidir.


<a href="digersayfa.htm?keepThis=true&TB_iframe=true&height=300&width=500" title="Diğer Sayfa" class="thickbox">Üyelik Koşulları</a>



Ayrıca burada kullandığımız jquery, thickbox eklentisi ile sayfalarınızda örneğin form elamlarını kutuda göstererek işlevsel bir veri kayıt uygulaması yapabilirsiniz.

Web programlama ile ilgilenen arkadaşlar için yararlı bir ders olduğunu düşünüyorum. Kolay gelsin.

  • Etiketler;
İsmail Mercan
1988 Çankırı Ilgaz doğumlu olan yazar, liseyi Ankara Aydınlık Evler Ticaret Meslek Lisesi / Bilgisayar Programcılığı bölümünde bitirdi. Daha sonra Akınsoft Ankara Bölge Müdürlüğünde stajyer olarak görev aldı. <p>2006 yılında halen devam etmekte olduğu Sakarya Üniversitesi Eğitim Fakültesi Bilgisayar ve Öğretim Teknolojileri Bölümüne yerleşerek öğrenimine devam etmektedir. <p>Web Programlama(PHP-MYSQL, ASP, AJAX,CSS, Javascript ) ve Web Tasarım(Photoshop, Fireworks, Dreamweaver,Flash) ile yakından ilgilenen yazar kendi çapında birçok küçük kapsamlı projeye imza atmıştır.
Yorum Yaz

Yorum yazabilmek için üye girişi yapmanız gerekiyor!

teşekkürler bir nevi lightbox sanırım faydalı ders teşekkürler.
kaynak dosya ??
kaynak dosya ??
Kaynak dosyalar düzenlenmiştir.

Yukarı Git