Cara Memberi Effect Light Pada Gambar

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

4. Kemudian simpan script berikut diatas kode </head>

<script src='http://milikazis.googlecode.com/files/prototype.js' type='text/javascript'/><br /> <script src='http://www.lokeshdhakar.com/projects/lightbox2/js/scriptaculous.js?load=effects,builder' type='text/javascript'/><br /> <script src='http://milikazis.googlecode.com/files/lightbox.js' type='text/javascript'/></code>

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>

Nich ntar jadie kayak gini :



2. Untuk Gambar lebih dari 1 silahkan tambahkan kode berikut

rel="lightbox[roadtrip]"

contoh :

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

Semoga berhasil ...





Sumber dari sini