Thickbox Nedir? Nasıl Kullanılır?

Thickbox, Lightbox akımıyla birlikte çıkan Lightbox türevlerinden Javascript-Ajax nimetlerinden biridir.

Thickbox, Lightbox akımıyla birlikte çıkan Lightbox türevlerinden Javascript-Ajax nimetlerinden biridir. Tabiki farkları olduğu için Lightbox kullanmak istemeyenler için bir seçenek olarak görebiliriz. Bu script’i kullanarak Resimlerinizi veya içeriklerinizi Klasik Pop-up pencere içinde açmak yerine varsayılan sayfa içinde açıp kullanabilirsiniz.

Tek Resim veya Resim Galerinizi göstermek bulunduğunuz sayfanın herhangi bir yerinde yazdığınız yazıyı yazının bulunduğu ‘id‘ i kullanarak açtırabilir, iframe veya Ajax türünde içeriği, bu script sayesinde açabilirsiniz.

Bu bizim Resim dışında ne işimize yarayacak diyenler için şöyle bir örnek verebilirim. Üyelik sistemi için Üye Ol yada Giriş Yap gibi bir link ekleyip linke tıklandığında Thickbox’la Üyelik Formu veya Kullanıcı Girişi ekranına giden bir tasarım yapabilirsiniz. Neye benzediğini görmek için konunun en altındaki Resimlere bakabilirsiniz.
Bunu herhangi bir siteye nasıl kuracağımızı öğrenmek için aşağıdaki Kurulum’u okuyunuz.

Kurulum

Kuruluma geçmeden önce aşağıdaki dosyaları ThickBox sitesinden yada aşağıdaki linklere basarak indirin.
Kurulum için gereken dosyalar;

  • Bu script’in içinde bulunduğu thickbox.js
  • CSS dosyası olan thickbox.css
  • Son olarak bu efekti sağlamak için varolan kütüphane Jquery veya sıkıştırılmış versiyonu olan Jquery Compressed Bu ikisinden birini kullanmanız yeterli. Ikisini birden kullanmayın.
  • Resim olarakta loadingAnimation.gif‘ı ve macFFgHack.png yi indirin.

Yukarıdaki dosyalardan Jquery kütüphanesinden herhangi birini indirdiğimizde ismini jquery.js olarak ayarlamayı unutmayın. Şimdi sırasıyla bunları sitenize eklemeniz gerekiyor. Eğer bu script’i bir WordPress Teması içinde kullanacaksanız aşağıda yazan dosyalarinbulunacagiklasor yerine <?php bloginfo(‘template_directory’); ?> yazın

(Bu kodla sitenizinadı.com/wp-content/themes/kullandığınıztema içine girmenizi sağlayacaktır.) ve yukarıdaki dosyaları doğrudan temanızın içine yerleştirin.
Aşağıda gördüğünüz kodlarıysa sitenizde yada temanızda bulunan <head> </head> kısmının arasında bir yere gerekli değişiklikleri yaparak kopyalayın. WordPress’te temadaki Header.php içinde ilgili yere kopyalayın.


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

Burada unutmamanız gereken en önemli olay macFFgHack.png dosyasını css dosyasının bulunduğu yere kopyalarken LoadingAnimation.gif denilen dosyayıysa diğer dosyaları attığınız yere bir images klasörü oluşturarak dosyayı içine atın.

Nasıl kullanılır?

En basit halde linklerinizin içine class=”thickbox” ekleyerek bu script’i kullanabilirsiniz. Aşağıda benzer bir kullanımını örnek olmak açısından verdim. Daha fazla bilgi için Thickbox’ın sitesinde bulunan Examples bölümüne gözatmanızı tavsiye ederim. (İçerik Ingilizcedir)

Tekli Resim için


<a title="baslik" href="images/single.jpg"><img src="images/single_t.jpg" alt="Tekli Resim" /></a>

Gördüğünüz gibi Thickbox’ın benzer kullanımları da bu şekilde yapılmakta. Bu script’le ilgili daha fazla bilgiyi aşağıdaki linkten alabilirsiniz. Şimdilik hoşçakalın.

kaynak codylindley.com

DAHA FAZLA İÇERİK

Mootools için Lightbox türevleri Mootools için Lightbox türevleri

14 Ocak 2015, Çarşamba

Google Yeni Yılımızı Kutluyor Google Yeni Yılımızı Kutluyor

26 Aralık 2014, Cuma

PHP Fonksiyonları: Unset() Kullanımı PHP Fonksiyonları: Unset() Kullanımı

20 Mayıs 2015, Çarşamba

SİZDE YORUM YAPIN

Php ile Gerçek IP adresini Alma

Php ile Gerçek IP adresini Alma 10 Ağustos 2015, Pazartesi

PHP Fonksiyonları: Unset() Kullanımı

PHP Fonksiyonları: Unset() Kullanımı 20 Mayıs 2015, Çarşamba