Facebook’taki Fotograflarınızı Blog’unuzda Gösterin »  « ThickBox Nedir? 
6 Eyl 2008

Facebox Nedir?

Kategori | Web Tasarım

 Facebook‘taki gibi pencereler açtırmayı istiyorsanız, bu yazı tam size göre demektir. Bu yazımda Facebox‘ın ne iÅŸe yaradığından ve nereden bulabileceÄŸinizden bahsedeceÄŸiz. 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. Javascript-Ajax nimetlerinden biri olan bu script’in nasıl kurulacağını anlatarak konumuza giriÅŸ yapalım.


Kurulum

 Kuruluma geçmeden önce aÅŸağıdaki dosyaları Facebox‘un sitesinden veya aÅŸağıdan indirin. Facebox sitesinde Tar dosyası olarak sunulduÄŸu için Dynamic Drive‘daki dosyaları kullanmak daha uygun olur diye düşündüm. AÅŸağıdaki dosyaları oradan verdim. Kurulum için gerekli dosyalar; Facebox1.1.zip

 Zip dosyasının içinden facebox.js, facebox.css, jquery-1.2.2.pack ve facebox içinde kullanılacak resim dosyaları çıkmış olmalı. facefiles klasörü içinde bulunan dosyaları sitenizde kullanmak istediğiniz yere koyun. 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 facefiles klasörünü 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 src="dosyalarinbulunacagiklasor/facefiles/jquery-1.2.2.pack.js" type="text/javascript"></script>

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

<script src="dosyalarinbulunacagiklasor/facefiles/facebox.js" type="text/javascript"></script>

 

<script type="text/javascript">

 

    jQuery(document).ready(function($) {

      $('a[rel*=facebox]').facebox() 

    })

 

</script>

 

 

 Yukarıda yazılanları yapıp dosyaları ilgili yere atmışsanız. Kurulum işleri tamamlanmış demektir. Şimdi gelelim nasıl kullanacağımıza.

 

Nasıl kullanılır?

  En basit halde linklerinizin içine rel=”facebox” ekleyerek kullanabilirsiniz. AÅŸağıda benzer bir kullanımını örnek olmak açısından verdim. Daha fazla bilgi için Dynamic Drive‘daki ilgili yeri veya Facebox sitesini gözatmanızı tavsiye ederim.

 


<p><a href="resim.jpg" rel="facebox">Resim</a></p>

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

http://www.dynamicdrive.com/dynamicindex4/facebox/index.htm

http://famspam.com/facebox

 

 


Yazı Bilgileri

  Merhaba Ziyaretçi, Bu yazı 6 Eylül 2008 tarihinde DincerDegre tarafından Web Tasarım kategorisi altında yayınlandı ve 7,414 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!.