Facebox – jQuery Pop Up Window Dialog Plugin
Kamu mungkin sebelumnya pernah menggunakan atau mendengar tentang plugin jQuery untuk menampilkan pop up window seperti Thickbox atau jqModal. Seperti Thickbox dan jqModal, Facebox berfungsi untuk membuat pop up window.
Mungkin memang fitur yang ditawarkan tidak selengkap Thickbox, tapi kemudahan yang diberikan bisa menjadi pertimbangan. Berbeda dengan thickbox yang memerlukan parameter height dan width saat triger (bila tidak diisi maka akan menggunakan setting default), di Facebox tidak perlu dan dapat mengatur lebar dan tinggi sesuai content yang berada dibelakangnya.
Berikut screenshot facebox di aplikasi yang sedang saya kerjakan:

Pertama, seperti biasa, file JS diload – tentunya setelah jQuery diload.
<script src="js/jquery-latest.js" type="text/javascript"></script> <script src="js/facebox/facebox.js" type="text/javascript"></script>
Cara menampilkan atau memunculkan window tersebut mudah dan bisa dilakukan dalam berbagai cara:
Menambahkan atribut rel=”facebox” pada setiap anchor yang ingin ditampilkan dalam bentuk pop up. Cara ini sama dengan ada yang di Thickbox.
$('a[rel*=facebox]').facebox({ loadingImage : 'js/facebox/loading.gif', closeImage : 'js/facebox/closelabel.gif' });
<a rel="facebox" href="toSomeUrl.html">Show Me</a>
Atau juga secara programatically, misalkan pop up muncul pada event-event yang diinginkan:
Sebelum ditriger untuk menampilkan, ada yang harus diset dulu sebelum digunakan seperti set alamat gambar yang diperlukan dan alamat file CSS.
Berikut contohnya:
$.facebox.settings.loadingImage = 'js/facebox/loading.gif'; $.facebox.settings.closeImage = 'js/facebox/closelabel.gif'; $.facebox.settings.opacity = 0.3; $('#show-dialog').click(function(){ $.get('toSomeUrl.html', function(rspn){$.facebox(rspn);}); }); // atau bisa juga ditulis $('#show-dialog').click(function(){ $.facebox({ajax : 'toSomeUrl.html'}); });
Untuk menutup pop up window tersebut bisa menggunakan method
$.facebox.close(); //atau $('button.close').click($.facebox.close());
Atau bila diembed di HTML seperti ini:
<button onclick="$.facebox.close();return false;">Close Me</button>
Oke, semoga bermanfaat.







