Bagi anda yang telah lama berkecimpung di dunia web development , mungkin anda sudah tidak asing lagi dengan apa yang di sebut Lightbox :) . Namun untuk anda yang belum mengenal nya (knalan lah! :lol:) , jangan khawatir ! resah ! ataupun gelisah ! huehuehue .. :D~~ , karena penulis akan mencoba share sedikit untuk menjelaskan definisi singkat dari script ini .
Lightbox JS merupakan sebuah script yang digunakan untuk menampilkan sebuah gambar secara overlay pada sebuah halaman web , serta dapat bekerja pada hampir semua jenis browser modern . kira2 seperti itulah apa yang di sebut Lightbox :D~~ .
Yang akan penulis fokuskan pada artikel kali ini , bukanlah tentang cara menggunakan Lightbox untuk meng-overlay sebuah image/gambar .
Pada artikel ini yang akan di bahas adalah tentang bagaimana agar Lightbox tidak hanya menampilkan image saja (misal : sebuah halaman website/blog , gambar , video , music dll) .
Ok , dari pada kelamaan .. ada baiknya kita langsung saja mencoba script ini . Untuk menggunakan script ini cara nya cukup mudah .
Anda tinggal memasukan script ini beserta file css nya ke dalam halaman web atau blog anda . Lalu buat sebuah link dengan tag html yang mengarah pada halaman web atau blog yang akan anda tampilkan secara overlay dengan attribut class dan di beri value lbOn . Berikut ini contoh penggunaan nya :
<html>Untuk membuat tombol Close pada halaman yang di overlay kan , anda dapat menggunakan sintax seperti contoh dibawah ini :
<head>
<title>Nightwalker Team | Contoh Lightbox Gone Wild</title>
<meta name="robots" content="index, follow" />
<meta name="keywords" content="lightbox , page overlay , document overlay , document effect , buffedie">
<!-- CSS ny disini --!>
<link rel="stylesheet" href="lightbox.css" media="screen,projection" type="text/css" />
<!-- Script ny disini -->
<script type="text/javascript" src="prototype.js"></script>
<script type="text/javascript" src="lightbox.js"></script>
</head>
<body link="#FF0000" bgcolor="#008B92">
<a href="ttg.html" class="lbOn">About Us</a> <br>
<a href="ktk.html" class="lbOn">Contact Us</a><br>
<a href="iframe.html" class="lbOn">Google Search</a><br>
<a href="image.html" class="lbOn">Nightwalker Billiard</a><br>
<a href="video.html" class="lbOn">Nightwalker Movie</a>
</body>
</html>
<a href="#" rel="deactivate">Close [~X~]</a>Bagi anda yang ingin mendalami Lightbox , anda dapat mempelajari nya langsung dari website resmi Lightbox , yang beralamat di :
http://www.huddletogether.com/projects/lightbox/
Untuk Project Lightbox Gone Wild , anda juga dapat mengunjungi website resmi nya yang beralamat di :
http://particletree.com/features/lightbox-gone-wild/
Untuk melihat demo nya anda dapat menuju link berikut ini : DEMO LIGHTBOX
Download script lengkapnya pada link berikut ini : DOWNLOAD
Akhir kata , /me ucapkan selamat mencoba dan salam super ! xixixixixi .. :lol:
EmoticonEmoticon