Membuat efek zoom pada gambar dengan JQuery ~ blog sepot

Membuat efek zoom pada gambar dengan JQuery

Membuat efek Zoom pada gambar adalah keuntungan 40% dari blog yang mungkin dapat menyempurnakan gambar apabila bentuk dari gambar itu kecil, tutorial ini menggunakan kode jQuery maka efek yang ditampilkan pun cukup bagus dan indah dan berikut tutorialnya

LIVE DEMO

Simak langkah² dibawah ini:

1. Login ke akun blogger sobat

2. Klik Template » Edit HTML

3. Kemudian tekan CTRL+F cari kode ]]></b:skin> atau </style>

4. Lalu tambahkan kode CSS berikut ini tepat diatas kode ]]></b:skin> atau </style>

/* Zoom Image
------------------------------- */
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. Selanjutnya cari kode </head>kemudian sisipkan kode berikut diatasnya

<!-- Zoom Image code script -->
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
<script src='https://sites.google.com/site/vanzdy/script/zoom.js' type='text/javascript'/>
<script type='text/javascript'>
jQuery(document.body).imageZoom();
</script>

6. Simpan template sobat

Semoga bermanfaat, selamat mencoba dan semoga berhasil.

Terima kasih telah membaca artikel tentang Membuat efek zoom pada gambar dengan JQuery di blog blog sepot jika anda ingin menyebar luaskan artikel ini di mohon untuk mencantumkan link sebagai Sumbernya, dan bila artikel ini bermanfaat silakan bookmark halaman ini diwebbroswer anda, dengan cara menekan Ctrl + D pada tombol keyboard anda.