Kinta Jquery Facebox

Tutorial Jquery Facebox
Kinta Mahadji
Mahadji_kinta@yahoo.com http://komputerblog.com
Lisensi Dokumen:
Copyright 2003-2007 IlmuKomputer.Com Seluruh dokumen di IlmuKomputer.Com dapat digunakan, dimodifikasi dan disebarkan secara bebas untuk tujuan bukan komersial (nonprofit), dengan syarat tidak menghapus atau merubah atribut penulis dan pernyataan copyright yang disertakan dalam setiap dokumen. Tidak diperbolehkan melakukan penulisan ulang, kecuali mendapatkan ijin terlebih dahulu dari IlmuKomputer.Com.
Bismillahirrahmanirrahim. Mengawali artikel tentang tutorial jquery, kali ini saya akan membahas tentang jquery facebox. Apa itu jquery facebox, merupakan facebook style lightbox yang mampu menampilkan gambar, divs container bahkan halaman remote, mudahnya bisa lihat gambar dibawah :
Contoh penerapan facebox Mirip facebook ya ?, memang, jquery facebox ini mampu menampilkan style ala facebook, lihat saja logo nya yang mirip dengan facebook.
Komunitas eLearning IlmuKomputer.Com Copyright 2003-2007 IlmuKomputer.Com
Logo facebox Okay sedikit saja pengantarnya karena ku tahu kau sudah tidak sabar menerapkannya :
Step 1
Pertama download terlebih dahulu facebox disini http://chriswanstrath.com/facebox/ , jika sudah extract, hasilnya sebagai berikut :
Hasil extract
Saya menamakan hasil extract bernama facebox, selanjutnya siapkan file HTML standar sebagai berikut :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>facebox</title> </head> <body> </body> </html>
Kemudian simpan dan tempatkan diluar folder extract, beri nama facebox.html
Step 2
Load css, jquery dan facebox plugin ke dalam tag head html, sehingga scriptnya menjadi sebagai berikut :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>facebox</title>  <link rel="stylesheet" href="facebox/facebox.css" media="screen" type="text/css"/>  <script src="facebox/jquery.js" type="text/javascript"></script> <script src="facebox/facebox.js" type="text/javascript"></script>  <script type="text/javascript"> Komunitas eLearning IlmuKomputer.Com Copyright 2003-2007 IlmuKomputer.Com
jQuery(document).ready(function($) { $('a[rel*=facebox]').facebox({ loading_image : 'facebox/loading.gif', close_image : 'facebox/closelabel.gif' }) }) </script> </head> <body> </body> </html>
Step 3
Saatnya mencoba, tambahkan script berikut diantara tag body
<body> <a href="facebox/stairs.jpg" rel="facebox">View '/facebox/stairs.jpg' in the Facebox</a> </body>
Penjelasan dong mas kinta, tenang aja, bakal ada kok tahap itu, sekarang kita coba dulu. Jalankan script facebox.html pada browser, voila ! bagaimana keren bukan ;) .
Hasilnya
Penjelasan script
Kamu minta penjelasan kan ?, sip, monggo atuh ditengok Perhatikan script dibawah ini, fungsi dari script ini adalah untuk meload file css yang terletak di folder facebox, css ini berisi style agar tampilan mirip dengan facebook
 <link rel="stylesheet" href="facebox/facebox.css" media="screen" type="text/css"/>
Script selanjutnya yaitu meload file jquery dan facebox, perlu diperhatikan, javascript jquery harus diload pertama kali kemudian diikuti oleh jquery facebox.
 <script src="facebox/jquery.js" type="text/javascript"></script> <script src="facebox/facebox.js" type="text/javascript"></script>
Jika sudah diload maka tahap selanjutnya yaitu melakukan inisiasi facebox.
 <script type="text/javascript"> jQuery(document).ready(function($) { $('a[rel*=facebox]').facebox({ loading_image : 'facebox/loading.gif', close_image : 'facebox/closelabel.gif' }) }) </script>
Di dalam tag head terdapat script

<a href="facebox/stairs.jpg" rel="facebox">View '/facebox/stairs.jpg' in the Facebox</a>
Perhatikan tulisan yang berwarna biru, fungsi dari tag tersebut adalah untuk mengembed javascript kedalam tag <a>, jadi agar fungsi facebox tampil tag <rel> tersebut harus ada. Perhatikan pula bahwa jika kamu ingin mengganti nama rel yang terdapat pada script diatas maka kamu juga harus ganti pada script inisiasi yaitu pada bagian :
$('a[rel*=facebox]').facebox({ Komunitas eLearning IlmuKomputer.Com Copyright 2003-2007 IlmuKomputer.Com
Script diatas adalah implementasi facebox untuk gambar, bagaimana kalau untuk yang lainnya ?, sama saja tinggal menambahkan rel=facebox. Penerapan facebox pada div
<a href="#info" rel="facebox">text</a>
Penerapan facebox pada ajax

<a href="remote.html" rel="facebox">text</a> <a href="http://www.google.com" rel="facebox">Google.com</a>
Semoga bermanfaat, jika mahadji_kinta@yahoo.com
ada
pertanyaan,
bisa
menghubungi
via
email/ym
Biografi Penulis
Kinta Mahadji. Menyelesaikan D3 di Politeknik Negeri Jakarta jurusan Teknik Telekomunikasi 2010. Menyukai dunia programming, sekarang sedang bergelut dalam dunia web development dan mobile apps, menguasai beberapa bahasa program penunjang untuk deploy web, diantaranya (X)HTML, CSS 1/2/3, PHP, MySQL dan J2ME untuk deploy mobile apps. Pernah mengikuti olimpiade computer, menulis di beberapa media online dan offline, mengerjakan freelance web application dan juga mengajar. Memiliki media online tempat mencurahkan ilmu yaitu http://komputerblog.com , semoga yang sedikit bermanfaat dan bernilai di mata Allah.

Kinta Jquery Facebox

Diunggah oleh

Informasi Dokumen

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Kinta Jquery Facebox

Diunggah oleh

Hak Cipta:

Format Tersedia

Tutorial Jquery Facebox

Komunitas eLearning IlmuKomputer.Com Copyright 2003-2007 IlmuKomputer.Com

Di dalam tag head terdapat script

Penerapan facebox pada ajax

Semoga bermanfaat, jika mahadji_kinta@yahoo.com

Komunitas eLearning IlmuKomputer.Com Copyright 2003-2007 IlmuKomputer.Com

Anda mungkin juga menyukai