Memberikan Effect Lightbox Pada Gambar

Bismillah ... Alhamdulillah akhirnya setelah kemarin menjelaskan tentang cara membuat Buku Tamu / Shoutbox dengan effect Light, sekarang saya akan menjelaskan cara memberi effetc light pada gambar. Untuk lebih jelasnya silahkan kalian perhatikan gambar berikut :



Lightbox untuk gambar ini mempunyai kelengkapan dengan adanya fitur sebagai berikut :

1. Tampil berdiri sendiri, Kalo dalam bahasa VB sering disebut ALways ON TOP
2. Adanya Button Next dan Prev untuk gambar lebih dari satu
3. Adanya Button CLOSE untuk menutup gambar

Untuk LIVE DEMO silahkan kalian Klik Button DEMO dibawah ini :


Untuk Membuatnya silahkan kalian ikuti tahap-tahap dibawah ini :

1. Login ke blogger kalian
2. Pilih Rancangan ---> EDIT HTML (centang expand template widget)
3. Sekarang simpan CSS berikut diatas kode ]]></b:skin>

<!-- Start light effect by azis lamayuda-->
#lightbox{ position: absolute; left: 0; width: 100%; z-index: 100; text-align: center; line-height: 0;}
#lightbox img{ width: auto; height: auto;}
#lightbox a img{ border: none; }
#outerImageContainer{ position: relative; background-color: #fff; width: 250px; height: 250px; margin: 0 auto; }
#imageContainer{ padding: 10px; }
#loading{ position: absolute; top: 40%; left: 0%; height: 25%; width: 100%; text-align: center; line-height: 0; }
#hoverNav{ position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 10; }
#imageContainer>#hoverNav{ left: 0;}
#hoverNav a{ outline: none;}
#prevLink, #nextLink{ width: 49%; height: 100%; background-image: url(data:image/gif;base64,AAAA); /* Trick IE into showing hover */ display: block; }
#prevLink { left: 0; float: left;}
#nextLink { right: 0; float: right;}
#prevLink:hover, #prevLink:visited:hover { background: url(http://lh5.ggpht.com/_Fm7TiIAusXk/TKAzmLsMrVI/AAAAAAAAABI/Xwqjr2RAwhs/prevlabel.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(http://lh6.ggpht.com/_Fm7TiIAusXk/TKAzmPM14CI/AAAAAAAAABE/MQlpAGatXcg/nextlabel.gif) right 15% no-repeat; }
#imageDataContainer{ font: 10px Verdana, Helvetica, sans-serif; background-color: #fff; margin: 0 auto; line-height: 1.4em; overflow: auto; width: 100% ; }
#imageData{ padding:0 10px; color: #666; }
#imageData #imageDetails{ width: 70%; float: left; text-align: left; }
#imageData #caption{ font-weight: bold; }
#imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em; }
#imageData #bottomNavClose{ width: 66px; float: right; padding-bottom: 0.7em; outline: none;}
#overlay{ position: absolute; top: 0; left: 0; z-index: 90; width: 100%; height: 500px; background-color: #000; }
<!-- End of light effect by azis lamayuda-->

4. Kemudia simpan script berikut diatas kode </head>
<script src='http://milikazis.googlecode.com/files/prototype.js' type='text/javascript'/>
<script src='http://www.lokeshdhakar.com/projects/lightbox2/js/scriptaculous.js?load=effects,builder' type='text/javascript'/>
<script src='http://milikazis.googlecode.com/files/lightbox.js' type='text/javascript'/>
5. Simpan Template kalian

Nah... setelah kita berhasil menambahkan kode dalam template kita, sekarang waktunya untuk memasangkannya pada gambar. Untuk pemasangannya ada 2 cara yaitu:

1. Untuk Hanya 1 gambar silahkan tambahkan kode berikut

rel="lightbox"

contoh :

<a href="URL GAMBAR" rel="lightbox"><img src="URL GAMBAR" /></a>

2. Untuk Gambar lebih dari 1 silahkan tambahkan kode berikut

rel="lightbox[roadtrip]"

contoh :

<a href="URL GAMBAR" rel="lightbox[roadtrip]"><img src="URL GAMBAR" /></a>
<a href="URL GAMBAR" rel="lightbox[roadtrip]"><img src="URL GAMBAR" /></a>

Alhamdulillah, postingan ini selesai saya buat dan semoga bermanfaat buat kalian. Terima kasih.