Membuat Efek Image Zoom Dengan Jquery

Seperti anda ketahui,banyak cara untuk membuat gambar yang terdapat di posting kita agar lebih menarik.Kali ini saya akan berikan satu lagi tips mengenai gambar di postingan, iaitu membuat efek image zoom. Cara kerja dari efek image zoom ini adalah ketika seorang pengunjung melakukan klik (klik kiri atau klik kanan) pada suatu gambar pada blog kita, maka gambar akan ditampilkan tetap pada halaman tersebut dengan efek membesar (zoom-in) dengan lembut. Dan jika di klik tombol [X] Close atau menekan tombol Esc pada keyboard maka gambar akan di sembunyikan (zoom-out) dengan efek mengecil dengan lembut. Tapi ini berlaku untuk semua gambar yang ada di blog kita tanpa terkecuali.

Untuk lebih jelasnya anda boleh cuba klik gambar di blog saya, klik salah satu gambar yang ada disitu, maka gambar tersebut akan membesar. Jika anda tertarik, di bawah ini akan saya berikan langkah-langkah untuk membuatnya :

Langkah 1

1. Login dulu ke blogger anda
2. Kemudian klik Design
3. Setelah itu klik Edit HTML
4. Lalu anda cari kode berikut ]]>
5. Setelah jumpa masukkan kode CSS dibawah ini sebelum kode diatas.

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;

}

Langkah 2

1. Selepas itu anda perlu mencari

2. Setelah jumpa masukkan kode dibawah ini dan letakkan diatas kode yang anda cari tadi.

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

Yang terakhir Save Template anda. Selesai dah....

Posted in: