Image Zoom 2.0 with jQuery

My first post in 2011 setelah lama vakum dari blog, hehehe..
Iseng-iseng browsing d internet dan ketemulah artikel tentang Image Zoom 2.0. with jQuery lalu saya langsung coba dan ternyata berhasil, hore!!!!
Oleh karena itu langsung saya share aja daripada ngomong banyak.

Pertama-tama silahkan dicoba contoh di bawah ini(Klik gambar)

Bagaimana? Kelihatan menarik bukan? Langsung aja deh saya kasih tutorialnya.
Pertama-tama login ke blogger dan menuju ke menu Design -> Edit HTML.
Setelah itu centang expand template widget dan cari script ]]></b:skin> dan copy-pastekan script di bawah ini di atas script tersebut.

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(http://andreaslagerkvist.com/aFramework/Modules/Base/gfx/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;
}


Kemudian cari script </head> dan kemudian copy-pastekan script d bawah ini di atas script tersebut.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>

<script src='http://andreaslagerkvist.com/aFramework/Modules/Base/jquery.imageZoom.js' type='text/javascript'/>

<script type='text/javascript'>
jQuery(document.body).imageZoom();
</script>


Ya hanya itu saja, gampang bukan??? Sekarang blog anda lebih kelihatan interaktif daripada sebelumnya karena seluruh gambar yang ada di postingan dapat di zoom. Selamat mencoba hehe.....

LITERATUR