Lytebox Image Viewer for Blogger (fixed)

Original by Zacky Adrishayuni | 06 Maret 2010 22 Comments

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 blogblog 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 </head>, 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="URLGAMBAR-1" style="width:320px;height:240;border:0" /></a> <a title="JUDUL LINK 2" href="URL-GAMBAR-2" rel="lytebox[grup]"><img src="URLGAMBAR-2" style="width:320px;height:240;border:0" /></a> <a title="JUDUL LINK 3" href="URL-GAMBAR-3" rel="lytebox[grup]"><img src="URLGAMBAR-3" style="width:320px;height:240;border:0" /></a> <a title="JUDUL LINK 4" href="URL-GAMBAR-4" rel="lytebox[grup]"><img src="URLGAMBAR-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 (Zacky Adrihayuni), wuahahahahaha...! Semoga berhasil...

Lytebox Demo
Original by Zacky Adrishayuni | Friday, March 5, 2010 1. Single Image Code: <a title="Indonesian Flag | I love Indonesia!" href="http://1.bp.blogspot.com/_Z_KyM3IvEFQ/S5EWVIMtcxI/AAAAAAAABUY/IraS4v5QBQ/s1600/Indonesian+Flag.jpg" rel="lytebox"><img style="width:320px" src="http://1.bp.blogspot.com/_Z_KyM3IvEFQ/S5EWVIMtcxI/AAAAAAAABUY/IraS4v5QBQ/s1600/Indonesian+Flag.jpg" border="0" alt="Indonesian Flag"/></a>

Result:

2. Grouped Images Code:

<a title="Honda Civic Si Concept | I will give it to Paris Hilton, lol..!" href="http://2.bp.blogspot.com/_Z_KyM3IvEFQ/S5FETJTu7cI/AAAAAAAABVA/qxR73Au4Krg/s1600/Hon da+Civic+Si+Concept.jpg" rel="lytebox[group-1]"><img style="width:210px;float:left;margin-right:5px" src="http://2.bp.blogspot.com/_Z_KyM3IvEFQ/S5FETJTu7cI/AAAAAAAABVA/qxR73Au4Krg/s1600/Hond a+Civic+Si+Concept.jpg" border="0" alt="Honda Civic Si Concept"/></a> <a title="Ferrari 458 Italia | Angelina Jolie gave me this car after I kissed her, haha..!" href="http://3.bp.blogspot.com/_Z_KyM3IvEFQ/S5FERYzepSI/AAAAAAAABU4/z3T56WdrkrU/s1600/Ferr ari+458+Italia.jpg" rel="lytebox[group-1]"><img style="width:210px;float:left;margin-right:5px" src="http://3.bp.blogspot.com/_Z_KyM3IvEFQ/S5FERYzepSI/AAAAAAAABU4/z3T56WdrkrU/s1600/Ferra ri+458+Italia.jpg" border="0" alt="Ferrari 458 Italia"/></a> <a title="Carlsson C25 | Hmm, I really want this car..." href="http://3.bp.blogspot.com/_Z_KyM3IvEFQ/S5FEQhcx_VI/AAAAAAAABUo/ckMvagDJNU0/s1600/Ca rlsson+C25.jpg" rel="lytebox[group-1]"><img style="width:210px;float:left;margin-bottom:20px" src="http://3.bp.blogspot.com/_Z_KyM3IvEFQ/S5FEQhcx_VI/AAAAAAAABUo/ckMvagDJNU0/s1600/Carl sson+C25.jpg" border="0" alt="Carlsson C25"/></a>

Result:

3. Slideshow Code: <a title="Ayumi Hamasaki | She is my wife, so please keep away from her!" href="http://2.bp.blogspot.com/_Z_KyM3IvEFQ/S5FEPtzYXI/AAAAAAAABUg/qlHWblNE5hY/s1600/Ayumi+Hamasaki.jpg" rel="lyteshow[slideshow-1]"><img style="width:210px;float:left;margin-right:5px" src="http://2.bp.blogspot.com/_Z_KyM3IvEFQ/S5FEPtzYXI/AAAAAAAABUg/qlHWblNE5hY/s1600/Ayumi+Hamasaki.jpg" border="0" alt="Ayumi Hamasaki"/></a> <a title="Chandra West | She is my housemaid" href="http://2.bp.blogspot.com/_Z_KyM3IvEFQ/S5FEQx4z3zI/AAAAAAAABUw/hlnluHKe65I/s1600/Chan dra+West.jpg" rel="lyteshow[slideshow-1]"><img style="width:210px;float:left;margin-right:5px" src="http://2.bp.blogspot.com/_Z_KyM3IvEFQ/S5FEQx4z3zI/AAAAAAAABUw/hlnluHKe65I/s1600/Chand ra+West.jpg" border="0" alt="Chandra West"/></a>

<a title="Olga Kurylenko | My poor ex GF..." href="http://1.bp.blogspot.com/_Z_KyM3IvEFQ/S5FFX3AalFI/AAAAAAAABVQ/ONZjodWHqfs/s1600/Olg a+Kurylenko.jpg" rel="lyteshow[slideshow-1]"><img style="width:210px;float:left;margin-bottom:20px" src="http://1.bp.blogspot.com/_Z_KyM3IvEFQ/S5FFX3AalFI/AAAAAAAABVQ/ONZjodWHqfs/s1600/Olga +Kurylenko.jpg" border="0" alt="Olga Kurylenko"/></a>

Result:

4. Single External Page Code: <a title="Google Search" href="http://www.google.com" rel="lyteframe" rev="width:640px;height:380px;scrolling:auto">Google Search</a>

Result: Google Search 5. Grouped External Pages Code: <a title="Google Search" href="http://www.google.com" rel="lyteframe[catalog]" rev="width:640px;height:380px;scrolling:auto">Google Search</a>

<a title="Yahoo! Search" href="http://search.yahoo.com" rel="lyteframe[catalog]" rev="width:640px;height:380px;scrolling:auto">Yahoo! Search</a> <a title="Bing Search" href="http://www.bing.com" rel="lyteframe[catalog]" rev="width:640px;height:380px;scrolling:auto">Bing Search</a>