jQuery Lightbox Evolution - Image-Video

jQuery Lightbox Evolution - Image-SWF-Video, adalah alat untuk menampilkan gambar, konten html, peta, dan video dalam gaya "lightbox" yang mengambang pada halaman web. Menggunakan Lightbox ini, author web dapat menampilkan berbagai macam media di semua browser utama tanpa menavigasi pengguna jauh dari halaman yang terhubung.

Tapi disini saya hanya akan memberikan tutorial bagaimana cara mengapklikasikan lightbox ini untuk Gambar dan Video, bagi yang ingin tahu cara untuk aplikasikan SWF dan HTML silahkan contact saya. lihat Contoh dibawah!

KLIK UNTUK MEMBUKA LIGHTBOX!

CONTOH VIDEO LIGHTBOX DARI YOUTUBE

Langsung saja copy paste script dibawah ini, lalu kemudian buka EDIT HTML kemudian simpan kode ini diatas kode </head>

<script src='http://ganteng-project.googlecode.com/svn/trunk/LightboxEvo/jquery-1.7.min.js' type='text/javascript'/>
<script src='http://ganteng-project.googlecode.com/svn/trunk/LightboxEvo/jquery.lightbox.js' type='text/javascript'/>
<script src='http://ganteng-project.googlecode.com/svn/trunk/LightboxEvo/imagenvideo.js' type='text/javascript'/>
<link href='http://ganteng-project.googlecode.com/svn/trunk/LightboxEvo/jquery-lightbox.css' rel='stylesheet' type='text/css'/>
<!--[if IE 6]><link rel="stylesheet" type="text/css" href="http://ganteng-project.googlecode.com/svn/trunk/LightboxEvo/jquery-lightbox-ie6.css" /><![endif]-->

Setelah itu save template anda. jQuery telah terpasang di template anda.

Cara Menerapkan Lightbox

cukup tambahkan kode class="lightbox" pada kode gambar anda, perhatikan contoh penerapan dibawah ini

<a href="assets/7.jpg" title="Image Description" class="lightbox"><img src="assets/m7.jpg" alt=""/></a>

Anda juga dapat membuat gambar dalam 1 grup (galeri gambar) dengan menambahkan kode rel="blah...blah...", contoh penerapan lihat dibawah.!

<a href="assets/5.jpg" class="lightbox" rel="group1"><img src="assets/m5.jpg" alt=""/></a>
<a href="assets/9.jpg" class="lightbox" rel="group1"><img src="assets/m9.jpg" alt=""/></a>
<a href="assets/6.jpg" class="lightbox" rel="group1" title="Lorem ipsum dolor sit amet..."><img src="assets/m6.jpg" alt=""/></a>

cara menerapkan video lightbox dari berbagai provider video sharing.

<a href="http://www.youtube.com/watch?v=TsUD1za9TA4" class="lightbox">youtube</a>
<a href="http://www.vimeo.com/12421175" class="lightbox"><img src="assets/m13.jpg" alt=""/>vimeo</a>
<a href="http://www.metacafe.com/watch/yt-nn096G5jek0/coldplay_speed_of_sound_acoustic/" class="lightbox">metacafe</a>
<a href="http://www.dailymotion.com/video/x53dvz_fragma-toca-s-miracle-2008_music" class="lightbox">dailymotion</a>
<a href="http://video.google.com/videoplay?docid=-8618166999532839788" class="lightbox">google video</a>

Gimana sobat blogger ?
simple banget kan :)
Kalau masih ada yang belum jelas, silahkan berkomentar dibawah

Hope You Enjoy \m/