Tuesday, August 2, 2011

Efek Image Zoom Jquery

Posting kali ini saya ingin membagi tips membuat gambar membesar menggunakan efek image zoom jquery. Efek ini akan bekerja apabila pengunjung mengklik mouse kanan ataupun kiri suatu gambar yang terdapat di halaman blog kita. Sedangkan untuk mengembalikan gambar ke kondisi semula cukup dengan menekan tombol (X) atau ESC. Efek ini bekerja pada semua gambar (image) yang ada di halaman blog. Berikut screenshootnya.

Sebelum diklik





Sesudah diklik (kanan/kiri)



Caranya.
1. Login ke akun sobat
2. Pilih Rancangan > Edit HTML
3. Kemudian cari kode </head>  dan letakkan kode javascript dan jquery berikut di atasnya

<script src='https://sites.google.com/site/mariozoner/gb-mario/jquery.tools.min.js' type='text/javascript'/>
<script src='https://sites.google.com/site/mariozoner/gb-mario/imageZoom.min.js' type='text/javascript'/>

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

4. Lanjut sob, cari kode ]]></b:skin> dan letakan kode css berikut 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://i1182.photobucket.com/albums/x453/marioadit/gmbr%20blog/imageZoom.png) no-repeat;
display: block;
width: 25px;
height: 25px;
position: absolute;
left: -20px;
top: -20px;
left: auto;
right: -20px;
text-decoration: none;
text-indent: -100000px;
outline: 0;
z-index: 15;
}
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. Klik Simpan dan lihat hasilnya

**Good Luck**


Related Post

0 comments:

Post a Comment

Mohon tinggalkan jejak/komentar sobat disini. Dilarang SPAM. Okey...