Bagaimana cara membuat Efek Zoom gambar dengan Jquery

Bagaimana cara kerja Efek Zoom gambar dengan Jquery adalah waktu anda klik gambar, maka gambar akan tetap di tampilkan di halaman tersebut dengan efek gambar menjadi membesar (efek zoom image. Lankahnya adalah sebagai berikut :

1.Log in ke blogger anda
2.Klik rancangan » edit HTML » centang kotak Expand Template Widget
3.Cari kode ]]></b:skin> dengan CTRL+F
4.Dan tempatkan kode dibawah ini 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(http://lh6.ggpht.com/_xcD4JK_dIjU/TEfN4VrRQPI/AAAAAAAAESY/so-0qObS1BM/d/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; } 

5.Cari kode </head> dan tempatkan kode dibawah ini tepat diatas kode </head>

kodenya :

<script type='text/javascript' src='https://sites.google.com/site/jeritanblog/javascript/jquery.min.js'/> <script type="text/javascript" src="https://sites.google.com/site/jeritanblog/javascript/imageZoom.min.js"/> <script type="text/javascript"> jQuery(document.body).imageZoom(); </script> 

6. Selesai deh Demonya disini

Source deejayhan