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

WordPress Super Popup Eklentisi WordPress Super Popup Eklentisi

22 Aralık 2014, Pazartesi

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

20 Mayıs 2015, Çarşamba

HTML Özellikler / Parametreler HTML Özellikler / Parametreler

28 Aralık 2014, Pazar

SİZDE YORUM YAPIN

HTML 5 contentEditable Kullanımı

HTML 5 contentEditable Kullanımı 23 Aralık 2015, Çarşamba

HTML’de Form Etiketleri

HTML’de Form Etiketleri 2 Mart 2015, Pazartesi

HTML5 Canvas Kullanımı

HTML5 Canvas Kullanımı 31 Ocak 2015, Cumartesi

HTML5 Yeni Input Tipleri

HTML5 Yeni Input Tipleri 17 Ocak 2015, Cumartesi

HTML’de Frameset’de Link Verme

HTML’de Frameset’de Link Verme 24 Aralık 2015, Perşembe

HTML’de Span Kullanımı

HTML’de Span Kullanımı 15 Ocak 2015, Perşembe

Tüm HTML Kodları

Tüm HTML Kodları 9 Ocak 2015, Cuma

HTML’de Div Kullanımı

HTML’de Div Kullanımı 8 Ocak 2015, Perşembe