Membuat LightWindow

Jendela Popup seperti, LightBox, PopBox, SlimBox atau VideoBox, semuanya dapat berfungsi dengan baik dan cukup flesibel untuk menampilkan beberapa jenis File. Seperti halnya Jendela PopUp yang saya hadirkan ini, "LightWindow", Sebuah PopUp yang mempunyai beberapa kelebihan, diantaranya berkemampuan untuk menampilkan Gambar, Video, Flash file, Galery dll...

Fungsi Jendela munculan ini hampir sama dengan Jendela munculan lainnya, yaitu dapat menampilkan konten. Dalam poyek ini terkadang kita dibuat pusing karena harus melakukan custom yang berbeda untuk masing-masing file, satu untuk Video, satu untuk Gambar dan belum lagi untuk Kompatibilitas.

Disininah perbedaan LightWindow dengan Jendela munculan lainnya, dimana LightWindow ini mampu menangani hampir semua jenis media dengan satu custom dan secara otomatis dapat terdeteksi. LightWindow ini kompatibel dengan Firefox, IE6, IE7, Safari dan Opera pada Windows dan Mac.


Untuk membuatnya, anda hanya memerlukan file-file seperti berikut ini:
1. prototype.js
2. scriptaculous.js
3. effects.js
4. lightwindow.js
5. lightwindow.css

Untuk file tersebut anda dapat men-download Archive LightWindow.zip disini. dan untuk langkah selanjutnya anda hanya perlu meng-host file-file tersebut kedalam server anda.

Sebagai kerangka prototipe adalah penggunaan yang cukup umum dan digunakan untuk berbagai fungsi dan trik, jika Anda sudah memilikinya, termasuk dalam template anda, anda tidak perlu khawatir untuk menggunakannya, paling tidak anda hanya perlu memeriksa apakah versi yang anda miliki sudah benar, atau anda dapat menggantinya dengan versi terbaru. Hal yang sama berlaku juga untuk script.aculo.us.

Setelah selesai men-download dan meng-host archive LightWindow.zip, silahkan masukan file hasil hosting kedalam template anda, tepatnya diatas kode </head>.

Contoh:

<script type="text/javascript" src="URL_prototype.js"></script>
<script type="text/javascript" src="URL_scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="URL_lightwindow.js"></script>
<link rel="stylesheet" href="URL_lightwindow.css" type="text/css" media="screen" />
</head>

Kemudian untuk menggunakannya, anda cukup dengan menambahkan class="lightwindow" kedalam setiap link.

Contoh:

<a href="URL_archive">LINK</a>

menjadi:

<a href="URL_archive" class="lightwindow">LINK</a>

dan LINK dapat berupa Icon, atau Thumbnail.

Pada prinsifnya script dapat mengidentifikasi semua jenis file dalam link, seperti misalnya;

Gambar dengan Format: bmp, gif, jpg, png dan tiff.
Video dengan Format: avi, divx, m1v, m2v, mjpg, moov, mov, movie, mpa, mpe, mpeg, mpg, qt, viv, vivo dan wmv.
Dan untuk Format halaman: asp, aspx, cgi, htm, html, pl, php4, php3, php, php5, phtml, rb, rhtml, shtml, txt dan vbs.
Sedangkan untuk Format aplikasi: Asf pdf, pps, rm dan swf dll.

Jika anda ingin membuat sebuah Galerry Gambar, kriteria yang sama dapat anda lakukan dengan cara menambahkan class="lightwindow" kedalam setiap link dan menambahkan atribut rel="" dengan nilai yang sama kedalamnya, Contoh:

<a href="URL_archive1" class="lightwindow" rel="Title[Subtitle]">LINK 1</a>
<a href="URL_archive2" class="lightwindow" rel="Title[Subtitle]">LINK 2</a>
<a href="URL_archive3" class="lightwindow" rel="Title[Subtitle]">LINK 3</a>

Dan jika Anda hanya ingin menampilkan 1 link saja, anda dapat menggunakan seperti contoh berikut:

<a href="URL_archive1" class="lightwindow" rel="Title[Subtitle]">LINK</a>
<a href="URL_archive2" class="lightwindow" rel="Title[Subtitle]"></a>
<a href="URL_archive3" class="lightwindow" rel="Title[Subtitle]"></a>

Jadi intinya secara sederhana anda cukup menambahkan class="lightwindow" untuk membuat LightWindow ini. Adapun jika anda ingin menyesuaikan beberapa parameter lain untuk setiap link, anda dapat menggunakan atribut params="", misalnya:

<a class="lightwindow" href="URL_arhive" params="Isi Parameter">LINK</a>

Berikut ini adalah Contoh Parameter lainya yang dapat anda gunakan:

lightwindow_width: adalah lebar jendela (dalam piksel)
lightwindow_height: adalah tinggi jendela (dalam piksel)
lightwindow_top: adalah jarak antara tepi atas layar dan awal jendela
lightwindow_left: adalah jarak antara tepi kiri layar dan awal jendela
lightwindow_loading_animation: diatur ke false untuk tidak menampilkan efek fade pada beban

Sedangkan untuk Parameter khusus, seperti parameter untuk kasus-kasus tertentu, misalnya:

lightwindow_show_images: menunjukkan jumlah gambar yang akan ditampilkan secara bersamaan di galeri (default adalah 1)
lightwindow_type: adalah opsional dan menunjukkan bagaimana link harus ditafsirkan (halaman, eksternal, gambar, media, inline)
lightwindow_iframe_embed: digunakan untuk menanamkan medium dalam IFRAME bukan DIV
lightwindow_form: menunjukkan nama jika kita menggunakan script untuk menampilkan formulir.

Dan jika anda menggunakan beberapa parameter, anda harus memisahkanya dengan tanda koma(,), misalnya:

params="lightwindow_width=425,lightwindow_height=350,lightwindow_loading_animation=true"

params="lightwindow_width=500,lightwindow_height=500,lightwindow_show_images=2"

Selain itu Atribut opsional khusus lainnya yang dapat anda gunakan adalah: judul, penulis, dan keterangan lain yang digunakan untuk menampilkan beberapa teks, misalnya:

<a class="lightwindow" href="URL_archive"
title="Text"
caption="Text"
author="Text"
params="Isi Parameter">LINK</a>

Anda juga dapat menempatkan konten inline kedalamnya, dimana konten sebelumnya tersembunyi dan hanya menampilkan Link saja, seperti:

<a href="#NamaID" class="lightwindow">LINK</a>
<div id="NamaID" style="display: none;">
<div>... Konten HTML Anda...</div>
</div>

Berikut ini adalah beberapa Properti yang dapat anda sesuaikan:

#Lightwindow_title_bar: daerah atas menunjukkan atribut TITLE dan link Anda bisa menutup jendela
#Lightwindow_title_bar_title: adalah teks atribut TITLE
#Lightwindow_title_bar_close_link: adalah link dengan "close" teks
#Lightwindow_data_caption: adalah teks atribut CAPTION
#Lightwindow_data_author: adalah teks Atribut PENULIS

Anda dapat melakukan ini dengan mengedit file lightwindow.css, atau menambahkan stylesheet seperti contoh berikut ini:

<style type='text/css'>
#lightwindow_title_bar_title { ... }
a#lightwindow_title_bar_close_link, a:link#lightwindow_title_bar_close_link,
a:visited#lightwindow_title_bar_close_link { ... }
a:hover#lightwindow_title_bar_close_link, a:active#lightwindow_title_bar_close_link { ... }
#lightwindow_data_caption { ... }
#lightwindow_data_author { ... }
</style>

Berikut ini contoh gambar LightWindow dengan penambahan atribut khusus:


Nah, demikianlah sekilas tentang LightWindow, semoga bermanfaat.






sumber: p51labs
vagabundia