Cara Membuat Efek Image Zoom Dengan Jquery. Banyak cara agar membuat tampilan blog kita lebih akrab dengan pengunjung. Salah satunya untuk memberikan efek zoom pada gambar. Dengan memberikan efek zoom pada gambar, maka pengunjung akan mudah untuk melihat gambar yang berukuran kecil ke ukuran gambar sebenarnya. Jadi pengunjung bisa melihat gambar dengan jelas.
Cara kerja dari efek zoom image ini adalah ketika pengunjung melakukan klik pada suatu gambar, maka gambar akan tetap di tampilkan di halaman tersebut dengan efek gambar menjadi membesar (efek zoom image) dengan lembut. Dan jika pengunjung ingin mengembalikan ukuran gambar ke ukuran semula pengunjung tinggan mengklik tombol close yang sudah disediakan, atau menekan tombol Esc pada keyboard, maka gambar akan secara otomatis kembali ke ukuran semua (zoom out). Ini berlaku untuk semua gambar yang ada di blog kita tanpa terkecuali. Bagi yang ingin melihat demonya silahkan klik link ini .
Nah bagaimana, apakah anda tertarik untuk mencobanya? jika ya, silahkan ikuti langkah-langkah Cara Membuat Efek Image Zoom Dengan Jquery berikut ini.
1.Log in ke blogger.
2.Klik rancangan » edit HTML » centang kotak Expand Template Widget. Bagi yang menggunakan tampilan baru dari blogger anda klik template » edit HTML » centag Expand Template Widget.
3.Cari kode ]]></b:skin> dan letakkan kode di bawah ini tepat di atasnya.
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;
}
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;
}
4.Cari kode </head> dan letakkan kode dibawah ini tepat di atasnya.
<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>
<script type="text/javascript" src="https://sites.google.com/site/jeritanblog/javascript/imageZoom.min.js"/>
<script type="text/javascript">
jQuery(document.body).imageZoom();
</script>
5.Save template anda.
Nah mudah bukan, sekian tutorial blogger kali ini yang telah membahas habis tentang Cara Membuat Efek Image Zoom Dengan Jquery. Mudah-mudahan bisa bermanfaat bagi anda. :)
EmoticonEmoticon