Headlines News :
Home » » Cara Membuat Efek Image Zoom Dengan Jquery

Cara Membuat Efek Image Zoom Dengan Jquery



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;
}

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>

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. :)

Saat ini kamu sedang membaca salah satu artikel FaHen Blogz yang berjudul Cara Membuat Efek Image Zoom Dengan Jquery. Kamu bisa menemukan artikel dengan judul Cara Membuat Efek Image Zoom Dengan Jquery ini dengan url http://fathuraksal.blogspot.com/2012/06/cara-membuat-efek-image-zoom-dengan.html. Saya mengucapkan terima kasih telah membaca artikel Cara Membuat Efek Image Zoom Dengan Jquery dan semoga postingan saya mengenai Cara Membuat Efek Image Zoom Dengan Jquery ini bisa bermanfaat untuk semua.

Share this article :

0 komentar:

Speak up your mind

Tell us what you're thinking... !

Translate

Adversite

 
Support : Copyright © 2013. FaHen Blogz All Rights Reserved.
Template Designed by FaHen and Heina Website. Publish on Template Blogger