Facebox Nedir? »  « 50 Kalın Yazı Font’u 
5 Eyl 2008

ThickBox Nedir?

Kategori | Web Tasarım

 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;

 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>

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

 

 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 href="images/single.jpg" title="baslik" class="thickbox"><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.

http://jquery.com/demo/thickbox/

 


Yazı Bilgileri

  Merhaba Ziyaretçi, Bu yazı 5 Eylül 2008 tarihinde DincerDegre tarafından Web Tasarım kategorisi altında yayınlandı ve 551 kere okundu. ÅŸimdi yazıyı Delicious'a Ekleyebilir, Yorum RSS'e abone olup yorumları takip edebilir veya Geri izleme yapabilirsin. Etiketler için Buraya, Yorum yazmak içinse Buraya tıklamalısın.

Bu Konuya Sizde Yorum Yazın!.