On-Click Image Zoom Using jQuery

Membuat postingan di blogger dengan menggunakan gambar, tentunya tidak semua gambar yang diposting tidak sesuai dengan apa yang kita inginkan, kadang kebesaran, kadang kekecilan, pengennya sih nampilin size aslinya :D
disini aku mau memberikan jQuery yang bisa memberikan efek zoom untuk gambar postingan kita, ketika gambar itu di klik.. lihat demonya dibawah

D E M O

klik gambar dibawah

 

Nih cara masangnya,

Step 1. Masukkan kode dibawah diatas kode ]]></b:skin>

div.jquery-image-zoom {

line-height: 0;
font-size: 0;
z-index: 10;
border: 5px solid #fff;
margin: -5px;
-webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}
div.jquery-image-zoom a {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBccsaFyFbm7iDUlK18n8WuZ3HsXdV3HliL5_4FFDHJbkCqs_SFEBcZEy8e7IKNaAxoXUs6jo334q91XbDT7B6TGt_1J6kkWLH9HyaIBrnmC1Icb8hPLSQJuSyrYKtXiP2DZX4z54b0Z8/s1600/jquery.imageZoom.png) no-repeat;
display: block;
width: 25px;
height: 25px;
position: absolute;
left: -17px;
top: -17px;
/* IE-users are prolly used to close-link in right-hand corner */
*left: auto;
*right: -17px;
text-decoration: none;
text-indent: -100000px;
outline: 0;
z-index: 11;
}
div.jquery-image-zoom a:hover {
background-position: left -25px;
}
div.jquery-image-zoom img,
div.jquery-image-zoom embed,
div.jquery-image-zoom object,
div.jquery-image-zoom div {
width: 100%;
height: 100%;
margin: 0;
}

Step 2. Masukkan Javascript ini di diatas kode </head>

<script src='http://lorddayz.googlecode.com/files/jquery.min.js' type='text/javascript'/>
<script src='http://lorddayz.googlecode.com/files/imageZoom.min.js' type='text/javascript'/>
<script type='text/javascript'>
jQuery(document.body).imageZoom();
</script>

 Happy Blogging :)