Membuat kotak dialog ala Facebook

Saya yakin bahwa anda sudah pernah menggunakan facebook ataupun setidaknya melihat facebook. Dan tentunya anda juga pasti anda pernah melihat tampilan seperti gambar di atas. Kali ini saya mengajak anda untuk bersama-sama mencoba membuat halaman web yang memiliki fungsi tersebut. Adapun langkah-langkah nya adalah sebagai berikut :

1. Download FaceBox di sini

2. Download jQuery di sini

3. Copykan file FaceBox dan jQuery yang telah ter-ekstrak ke dalam folder website anda.

4. Tuliskan kode berikut di section head halaman web anda

<script src="jquery.js" type="text/javascript"></script> <link href="/facebox/facebox.css" media="screen" rel="stylesheet" type="text/css"/> <script src="/facebox/facebox.js" type="text/javascript"></script> jQuery(document).ready(function($) { $('a[rel*=facebox]').facebox() })

Dengan demikian, anda telah dapat menggunakan fungsi tersebut di dalam website anda. Nah, muncul pertanyaan baru. Bagaimana cara memanggil fungsi ini ?

1. Untuk menampilkan gambar

<a href="stairs.jpg" rel="facebox">text</a>

2. Untuk menampilkan tulisan

<a href="#" rel="facebox">text yang ingin ditampilkan</a>

3. Untuk menampilkan file html

<a href="remote.html" rel="facebox">text</a>

Untuk explorasi lebih lanjut silahkan kunjungi http://famspam.com/facebox.

Share

Related Posts