jQuery Lightbox Evolution - Image, Video

About this Post :
Post Title	>> jQuery Lightbox Evolution - Image, Video
Date	>> January 24, 2012
Author	>> Mr. Lam3rs
Link	>> http://31337day.blogspot.com/2012/01/jquery-lightbox-evolution-image-video_24.html
Labels	>> jQuery

Untuk DEMO dapat anda lihat disini
Dan untuk menerapkannya di blog anda, silahkan ikuti petunjuk di bawah ini:

1. Login ke akun blogger anda
2. Pilih Design » Edit HTML
3. Lalu copy kode di bawah ini dan letakkan di atas kode </ head>

<script src='http://www.geocities.ws/thelam3rs/js/jquery-1.7.min.js' type='text/javascript'/>
<link href='http://www.geocities.ws/thelam3rs/css/lightboxv1.css' rel='stylesheet' type='text/css'/>
<link href='http://www.geocities.ws/thelam3rs/css/lightboxie6v1.css' rel='stylesheet' type='text/css'/>
<script src='http://www.geocities.ws/thelam3rs/js/jquery.lightbox.js' type='text/javascript'/>
<script src='http://www.geocities.ws/thelam3rs/js/imagenvideo.js' type='text/javascript'/>

4. Simpan template anda, dan selamat jQuery Lightbox Evolution kini telah terpasang di blog anda :)

Bagaimana cara penerapan lightbox diatas?
Anda cukup tambahkan kode class='lightbox' pada kode gambar anda, perhatikan contoh penerapan dibawah ini:

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

Anda juga dapat membuat gambar dalam 1 grup (galery gambar) dengan menambahkan kode rel="namagalerygambar", contoh penerapan lihat dibawah:

<a href="theLam3rs1.jpg" class="lightbox" rel="group1"><img src="theLam3rsv1.jpg" alt=""/></a>
<a href="theLam3rs2.jpg" class="lightbox" rel="group1"><img src="theLam3rsv2.jpg" alt=""/></a>
<a href="theLam3rs3.jpg" class="lightbox" rel="group1" title="Lorem ipsum dolor sit amet..."><img src="theLam3rsv3.jpg" alt=""/></a>

Cara menerapkan video lightbox dari berbagai provider video sharing:

<a href="http://www.youtube.com/watch?..." class="lightbox">Youtube</a>
<a href="http://www.vimeo.com/..." class="lightbox">Vimeo</a>
<a href="http://www.metacafe.com/watch/..." class="lightbox">Metacafe</a>
<a href="http://www.dailymotion.com/video/..." class="lightbox">Dailymotion</a>
<a href="http://video.google.com/videoplay?docid=..." class="lightbox">Google Video</a>

Baik sekian penjelasan saya mengenai jquery lightbox evolution, dan untuk yang merasa belum jelas dengan penjelasan saya di atas silahkan berkomentar di bawah postingan ini. Insya Allah akan saya respon secepatnya.

Terima kasih, semoga bermanfaat :)

Resources: http://om-dayz.blogspot.com/2011/12/jquery-lightbox-evolution-image-video.html#axzz1k71Lta8W