Inginkan paparan gambar kelihatan lebih menarik sewaktu di view?
Meh nak kenalkan sikit dengan LightBox.. huhuhu..
Dulu aku ada pakai tapi sekejap je dengan galakan dari
Chokilala..
Sekarang aku nak aktif balik guna benda ni..
Puas mencari dan mencuba teknik2 lightbox nie..
Ada yang menjadi ada yang tidak.. Ada yang jadi tapi tak sempurna sifatnya..
harharhar.. Last sekali pakai jugak la kod dari website ni
Blogger Widgets..
Ada yang senang pakai je la.. kui3
Demo di Bawah sila klik gambar.. ^__^
Web ni ngajor dalam omputih, aku ngajor dalam melayu.. =p
Cara Untuk Pasang :Masuk ke Blogger Dashboard
Pilih Layout > Edit HTML (jgn lupa tick kotak Expand Widget Templates)
Cari kod
</head> kemudian ganti dengan kod kat bawah ni dan save template..
<!--Light Box Code Starts Bloggerplugins.ORG-->
<style>
#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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6F_DkiJRlogTLQdQ7TWZsftJ1gzH_5PqcCAIButNGvwMB4fVmPMk4y8IDfGSpkOr97JSjczeuJIXddR_tEbGhsqXub8XtcVDuPf1hvGbAL6drEm-OSQ6fEMPefaEC_d7yUK2mo_OFSLE/) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwBGJYd6UPPc_Qqt6Dhkm7BtU93bxLGkyolHM3EmKdF1xQtCxsg_m-CCauChKnTUWtXK5fi5eO5GfyMjXz7r0eoDkn-4n94FDnLhOT03ylZrTh6IrbGCl7u6MnSvOz6EINxpf_Hw4lXhQ/) 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; }
round-color: #000; }
lute; top: 0; left: 0; z-index: 90; width: 100%; height: 500px; background-color: #000; }
round-color: #000; }
</style>
<script src='http://ajax.googleapis.com/ajax/libs/prototype/1.6.0.2/prototype.js' type='text/javascript'/>
<script src='http://files.bloggerplugins.org/lbox/js/scriptaculous.js' type='text/javascript'/>
<script src='http://blogergadgets.googlecode.com/files/lightbox.js' type='text/javascript'/>
<!--Light Box Code Ends Bloggerplugins.ORG-->
</head>
Cara Untuk Guna :Posting > Edit Post
Tukar kod
onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}"dengan
rel="lightbox" title="tajuk gambar" atau
rel="lightbox[happy]" title="tajuk gambar" untuk menjadi galeri gambar..
Pastikan buang
-h di hujung
s1600-hOk! Siap untuk di gunakan.. Senang je pun.. ^___^
Credit to :
Blogger Widgets
