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! |
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/
0 komentar :
Posting Komentar