Menampilkan Gambar dengan Efek LightBox

13.10 // 1 komentar // macho // Category: Tutorial Blog //

Efek LightBox memberikan efek tampilan gambar yang sangat bagus, Ketika gambar diklik maka gambar akan memperbesar pada halaman yang sama dengan warna latar belakang hitam transparan. Anda juga bisa mengelompokan beberapa gambar, ketika salah satu gambar diklik maka gambar akan memperbesar dan Anda dapat beralih ke gambar lain dengan mengeklik kiri/ kanan tepi gambar.

Bagaimna cara menerapkan efek lightbox pada blogger? 
Berikut langkah-langkahnya:

1. Ke Layout, lalu Edit HTML
2. Sisipkan kode CSS di bawah ini di atas kode ]]></ b: skin>

#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://i788.photobucket.com/albums/yy169/macho_album_2010/tutorialmacho/prevlabel.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(http://i788.photobucket.com/albums/yy169/macho_album_2010/tutorialmacho/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; }

3. Kemudian Sisipkan kode di bawah ini dibawah kode ]]></ b: skin>

<script src='http://machrus.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://machrus.googlecode.com/files/lightbox.js' type='text/javascript'/>

4. Simpanlah Template

5. Sekarang kita mulai dengan membuat halaman untuk menampilkan sekelompok gambar, Ke Posting > Entri Baru, kemudian masukan gambar yang anda inginkan


6. Setelah upload beberapa gambar, pada mode "Edit Html", tambahkan kode rel="lightbox[roadtrip]" pada setiap kode gambar, dan jika gambar hanya satu cukup tambahkan kode rel="lightbox”




7. klik Terbitkan Entri

NB: 
Kami tidak menjamin semua source yang berupa Gambar dan JavaScript akan selalu ada, maka dari itu silahkan Anda upload sendiri pada hosting pribadi anda. untuk cara upload source javascript pada hosting silahkan klik dsini.

Selamat mencoba….