Facebox Nedir? Nasıl Kurulur ve Kullanılır?

Facebox Nedir? Nasıl Kurulur ve Kullanılır?

Facebox Nedir? Nasıl Kurulur ve Kullanılır?

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.

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.

Facebox 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

ITC | İlkteknoloji