Lytebox adalah sebuah
lightbox yang dibuat untuk menampilkan suatu objek secara mandiri dengan menghapus ketergantungan prototype.js, effects.js, dan scriptaculous.js. Sejak versi asli Lytebox yang dibuat oleh
Lokesh Dhakar (yang dirilis dengan dukungan iFrame) dibuat, modifikasi besar telah dilakukan untuk meningkatkan kinerjanya sebaik mungkin dan juga "Sildeshow", "Tema", dukungan konten HTML (sebagai lawan dari hanya gambar) dan masih banyak lagi pilihan yang dapat dikonfigurasi yang memungkinkan Anda untuk menyesuaikan tampilan dan nuansa Lytebox. (ini intro yang saya kutip dari
Dolem)
Anda mungkin sudah pernah (saya juga) membaca
tips tentang
cara memasang lytebox di blog-blog lain. Saat pertama membaca dan melihat demonya, Lytebox berjalan dengan baik. Namun beberapa hari setelah itu sampai sekarang, Lytebox yang berasal dari
trik blog-blog tersebut tidak berfungsi lagi. Saya berpikir itu karena hostingan tempat menaruh script nya sudah melewati batas bandwitch, jadi saya coba upload script tersebut ke hostingan baru, namun hasilnya tetap sama. Huft, pusing juga. Apa penyebabnya?
Karena saya sangat penasaran dengan
Lytebox ini, saya coba mengutak-atik
kode css dan javascript nya. Setelah memakan waktu kurang lebih 5 jam, akhirnya usaha saya untuk bertahan di depan monitor pun membuahkan hasil. Lytebox yang saya masukkan ke bengkel html saya (Macromedia Dreamweaver 8) berjalan sesuai dengan rencana.
Lytebox yang akan saya jelaskan ini adalah
Lytebox v3.22. Di postingan sebelumnya tentang
Lightbox, yaitu
Facebox, Lytebox menggunakan
prototype sebagai pengendali akitifitasnya sedangkan Facebox mengandalkan
jQuery.
Berikut beberapa fitur v3.22 :
- Menampilkan satu gambar
- Menampilkan gambar-gambar dalam satu grup
- Membuat slideshow
- Menampilkan halaman atau link eksternal, bisa untuk
satu link atau
link dalam sebuah grup
Gimana menarik kan? Mau tau cara membuatnya? ("ah, dari tadi kek, kebanyakan ceramah nih si zacky", jawab si pembaca)
Berikut Cara Memasang Lytebox di Blogger / Blospot
1. Memasang kode CSS dan Javascript
- Pilih
Layout >
Edit HTML
- Cari kode , lalu paste kode berikut di atasnya:
<!-- Lytebox v3.22 fixed by http://tipsbloggerzacky.blogspot.com //-->
<script src='http://doigirls.megabyet.net/lytebox/lytebox.js' type='text/javascript'></script>
<link href='http://doigirls.megabyet.net/lytebox/lytebox.css' media='screen' rel='stylesheet' type='text/css'/>
<!-- Lytebox v3.22 fixed http://tipsbloggerzacky.blogspot.com //-->
- Klik
Save Template
2. Penerapan Lytebox
Seperti yang sudah saya jelaskan tadi, Lytebox bisa digunakan untuk menampilkan satu gambar atau lebih, membuat slideshow, dan menampilkan halaman eksternal. Anda bisa menggunakannya di postingan atau di Page Element template anda.
Berikut kode-kode pengaplikasian Lytebox:
- Menampilkan Satu Gambar
<a title="JUDUL LINK" href="URL-GAMBAR" rel="lytebox"><img src="URL-GAMBAR" style="width:320px;height:240;border:0" /></a>
demo » klik disini
- Menampilkan Beberapa Gambar Dalam Satu Grup
<a title="JUDUL LINK 1" href="URL-GAMBAR-1" rel="lytebox[grup]"><img src="URL-GAMBAR-1" style="width:320px;height:240;border:0" /></a>
<a title="JUDUL LINK 2" href="URL-GAMBAR-2" rel="lytebox[grup]"><img src="URL-GAMBAR-2" style="width:320px;height:240;border:0" /></a>
<a title="JUDUL LINK 3" href="URL-GAMBAR-3" rel="lytebox[grup]"><img src="URL-GAMBAR-3" style="width:320px;height:240;border:0" /></a>
<a title="JUDUL LINK 4" href="URL-GAMBAR-4" rel="lytebox[grup]"><img src="URL-GAMBAR-4" style="width:320px;height:240;border:0" /></a>
demo » klik disini
- Membuat Slideshow
<a title="JUDUL LINK 1" href="URL-GAMBAR-1" rel="lyteshow[slideshow]"><img src="URL-GAMBAR-1" style="width:320px;height:240;border:0" /></a>
<a title="JUDUL LINK 2" href="URL-GAMBAR-2" rel="lyteshow[slideshow]"><img src="URL-GAMBAR-2" style="width:320px;height:240;border:0" /></a>
<a title="JUDUL LINK 3" href="URL-GAMBAR-3" rel="lyteshow[slideshow]"><img src="URL-GAMBAR-3" style="width:320px;height:240;border:0" /></a>
<a title="JUDUL LINK 4" href="URL-GAMBAR-4" rel="lytebox[slideshow]"><img src="URL-GAMBAR-4" style="width:320px;height:240;border:0" /></a>
demo » klik disini
- Menampilkan Halaman Eksternal
1. Satu Halaman Eksternal
<a title="JUDUL HALAMAN EKSTERNAL" href="URL-HALAMAN-EKSTERNAL" rel="lyteframe" rev="width:640px;height:380px;scrolling:auto">Google Search</a>
demo » klik disini
2. Beberapa Halaman Eksternal Dalam Satu Grup
<a title="JUDUL HALAMAN EKSTERNAL-1" href="URL-HALAMAN-EKSTERNAL-1" rel="lyteframe[external]" rev="width:640px;height:380px;scrolling:auto">Google Search</a>
<a title="JUDUL HALAMAN EKSTERNAL-2" href="URL-HALAMAN-EKSTERNAL-2" rel="lyteframe[external]" rev="width:640px;height:380px;scrolling:auto">Yahoo! Search</a>
<a title="JUDUL HALAMAN EKSTERNAL-3" href="URL-HALAMAN-EKSTERNAL-3" rel="lyteframe[external]" rev="width:640px;height:380px;scrolling:auto">Bing Search</a>
demo » klik disini
Keterangan:
1.
http://doigirls.megabyet.net/lytebox/ adalah tempat hostingan script Lytebox.
Silahkan download
source Lytebox v3.22 disini. Ekstrak source Lytebox v3.22 dan upload ke hostingan anda, letakkan ke satu folder. Ingat!, url gambar backgroud yang ada di dalam
lytebox.css, misalnya
images/close_grey.png tidak perlu anda ganti, karena file tersebut sudah berada folder yang sama. Saya sarankan anda memilih hostingan untuk free web hosting yang yang memiliki batasan bandwitch yang besar, untuk hal ini saya rekomendasikan anda untuk memilih
Megabyet Internet. "Inilah rahasia berjalannya Lytebox".
2.
title="JUDUL LINK" dan
title="JUDUL HALAMAN EKSTERNAL" sangat berguna untuk Lytebox karena
JUDUL LINK dan
JUDUL HALAMAN EKSTERNAL tersebut akan muncul di sebelah kanan bawah Lytebox dan gunanya untuk memberi informasi tentang gambar apa yang sedang dilihat oleh pengunjung.
3.
style="width:320px;height:240;border:0" berfungsi untuk mengatur ukuran tampilan sebelum masuk ke Lytebox, karena sangat tidak efisien jika kita menampilkan ukuran sebenarnya di blog sedangkan kita telah menggunakan Lytebox sebagai
image viewer.
Misalnya ukuran gambar anda adalah 800x600 pixel, maka ganti kode
width:320px;height:240 menjadi
width:400px;height:300px sehingga gambar yang muncul di blog berukuran 400x300 pixel.
4.
rel="lytebox" berfungsi untuk memanggil kode javascript yang anda pasang. Kode ini tidak perlu diganti!
5.
rel="lytebox[grup]" , kode
grup berfungsi sebagai
id pengelompokkan gambar. Kode ini bisa anda ganti sesuai keinginan.
5.
rel="lytebox[slideshow]" , kode
slideshow berfungsi sebagai
id pengelompokkan gambar untuk menampilkannya ke dalam sebuah Slideshow. Kode ini bisa anda ganti sesuai keinginan.
6.
rel="lyteframe" berfungsi untuk memanggil kode javascript yang anda pasang. Kode ini tidak perlu diganti!
7.
rel="lyteframe[external]" , kode
external berfungsi sebagai
id pengelompokkan halaman eksternal. Kode ini bisa anda ganti sesuai keinginan.
8.
rev="width:640px;height:380px;scrolling:auto" berfungsi untuk mengatur ukuran Lytebox yang menampilkan halaman ekternal. Kode width:640px;height:380px bisa anda ganti sesuai keinginan.
9. Jika anda ingin memasangnya di postingan, maka lakukan pembuatan postingan di
tab edit Html. Jika anda ingin memasangnya di template blog, maka tambahkan
Page Elements dengan
HTML/Javascript.
Huft, akhirnya selesai juga... Demo Lytebox bisa anda lihat
disini.
Jika anda memiliki keraguan, kotak komentar di bawah ini akan menerima anda dengan senang hati..
Oya, sebelum postingan ini sampai di tanda titik yang terkahir, mari sama kita berterima kasih kepada:
1.
Lokash Dhakar, sang penemu Lytebox
2.
Dolem Lytebox, sang editor Lytebox
3.
Megabyet Internet, hostingan saya
4. Macromedia Dreamweaver 8, bengkel web designer saya
5. Terakhir, tentunya kepada saya sendiri , wuahahahahaha...!
Semoga berhasil...