Mengenal Lightbox Media Viewer

Lightbox dalam dunia blog lebih dikenal sebagai sebuah image viewer yang berguna untuk mempreviewkan sebuah image dengan ukuran besar melalui fungsi klik dari image lain yang berukuran jauh lebih kecil (thumbnail/miniatur) atau bisa juga preview image berukuran besar tersebut dihasilkan dari sebuah teks link. Dalam arti yang lebih luas, lightbox adalah sebuah media viewer yang pada saat bekerja memanfaatkan efek cahaya latar guna memperindah fungsi. Lightbox yang ada pada saat ini dikenal dengan beberapa nama dengan fungsi tak lagi hanya sebagai sebuah image viewer namun banyak berkembang sebagai sebuah media vierwer. Kebanyakan dari media viewer tersebut terinspirasi oleh lightbox yang pada awalnya dikembangkan oleh Leandro Vieira Pinho (Brazil-jQuery plugins) dan Lokesh Dhakar yang menggunakan scripttaculous.js dan prototype.js.

Beberapa media seperti image file, video file, html file (iframe) kini tak lagi harus ditampilkan secara langsung di halaman blog, namun cukup dengan memanfaatkan sebuah link berupa teks atau image. Metode seperti ini memberi keuntungan besar bagi blogger karena image, video atau iframe dalam jumlah sedikit atau banyak tak harus melalui loading secara bersamaan dengan bagian blog yang lain. Loading file yang berupa gambar (image), video atau iframe hanya akan terjadi ketika sebuah link (berupa teks atau thumbnail) di klik (umumnya memanfaatkan fungsi klik). Blog atau web yang menggunakan lightbox tak perlu lagi menampilkan gambar (image), video atau iframe berukuran besar yang justru menjadi beban tersendiri bagi blog. Beberapa buah image dalam ukuran kecil (thumbnail) atau teks link bisa menjadi sarana bagi "dimunculkanya" file-file berukuran besar seperti dimaksud di atas.

berbagai macam lightbox kini tersedia dalam bentuk gratisan. Anda bisa menggunakannya secara bebas sekaligus bisa memilih media viewer yang diinginkan. Ada yang hanya berfungsi sebagai image viewer, namun banyak pula yang berupa media viewer.

Contoh Image Viewer menggunakan Lightbox

Klik pada teks link (gadisku-1) dan link berupa thumbnail (image) di bawah ini:

• Membuat preview image menggunakan link preview berupa teks:
  gadisku-1
• Membuat preview image menggunakan link preview berupa thumbnail:
  

1. Image Viewer: berfungsi untuk mempreviewkan image (gambar).
2. Media Viewer: berfungsi untuk mempreviewkan beberapa media, seperti:
   
   • Image
   • Video : Video pribadi atau yang berasal dari media sosial seperti Youtube, Vimeo, Google Video dll.

Lightbox bisa dibangun hanya menggunakan kode CSS atau perpaduan kode CSS dan javascript. Jika kita tinjau dari javascript yang digunakan lightbox dapat dibedakan menjadi:

1. Lightbox yang dibuat menggunakan prototype.js dan scripttaculous.js.
2. Lightbox yang dibuat menggunakan mootool.js
3. Lightbox yang dibuat menggunakan jQuery.js
4. Lightbox yang dibuat menggunakan javascript tersendiri.

Masing-masing lightbox tentunya mempunyai kelebihan dan kekurangan. Yang perlu diperhatikan saat menggunakan lighbox terutama pada sisi kegunaan. Jika preview hanya diperlukan bagi image akan lebih baik jika menggunakan lightbox image viewer. Hal ini berkaitan dengan jumlah atau beban script yang harus ditanggung blog. Javascrpt media viewer pasti akan lebih berat bebannya jika dibandingkan dengan yang hanya berupa image viewer. Anda juga perlu mempertimbangkan pilihan pada prototype.js, mootool.js atau jQuery.js ketika dalam blog anda sudah digunakan salah satu dari ketiga javascript tersebut. Mempergunakan javascript yang sama tentu akan lebih menguntungkan jika dibandingkan penggunaan bermacam-macam javascript karena beban loading blog menjadi lebih terkendali.

Beberapa lightbox yang saat ini bisa dimanfaatkan blogger diantaranya:

1. Lightbox Blogger Plugins (Blogger/Blogspot).
2. Lightbox Wordpress Plugins (Wordpress).
3. Lightbox Blogdetik Plugins (Blogdetik).
4. Lightbox Image Viewer
   • Lightbox (prototype.js, scriptaculous.js).
   • Lightbox (mootool.js)
   • Lightbox (jQuery.js)
   • Lightbox (javascript)
   • Lightbox (css/css3)
5. Lightbox Media Viewer (prototype.js, mootool.js, jQuery.js, javascript)
   • Pirobox
   • Lightbox
   • Videobox
   • Greybox
   • Fancybox
   • Thickbox
   • Lightview
   • Lightwindow, ... dll

Sumber

• http://lokeshdhakar.com
• http://leandrovieira.com
• Beberapa sumber lain.