Membuat Efek Image Zoom dengan Jquery

Seperti temen-temen ketahui, banyak sekali cara untuk memodifikasi gambar yang terdapat di dalam postingan kita agar lebih kelihatan menarik. Setelah sebelumnya saya menulis tentang membuat efek blur pada gambar, kali ini saya akan berikan satu lagi tips modifikasi gambar di postingan, yaitu 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) yang lembut. Dan jika di klik tombol [X] Close atau menekan tombol Esc pada keyboard maka gambar akan di sembunyikan (zoom-out) dengan efek mengecil yang lembut. Tapi ini berlaku untuk semua gambar yang ada di blog kita tanpa terkecuali.

Untuk lebih jelasnya anda bisa lihat disini, klik salah satu gambar yang ada disitu, maka gambar tersebut akan membesar. Nah, jika temen-temen tertarik di bawah ini akan saya berikan langkah-langkah pembuatannya :

1. Login dulu ke blogger anda
2. Kemudian klik Rancangan 
3. Setelah itu klik Edit HTML
4. Lalu anda cari kode berikut ]]></b:skin>
   
5. Setelah ketemu 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;
   }

6. Masih belum selesai setelah itu cari kode berikut </head>. Setelah ketemu masukkan kode berikut diatasnya.

<script  type='text/javascript'  src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js'/>
<script  type="text/javascript"  src="https://sites.google.com/site/bangkolis/javascript/maskolisjquery.imageZoom.min.js"/>
<script type="text/javascript">
jQuery(document.body).imageZoom();
</script>

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

Catatan :
Sekedar catatan, sebaiknya anda simpan kode HTML imagezoom pada file penyimpanan anda sendiri agar script ini bisa berjalan dengan baik. Berhubung kemarin ada teman yang nyoba ternyata nggak bisa jalan scriptnya. Download scriptnya di sini. Untuk mengetahui bagaimana cara menyimpan file di penyimpanan online (google code) silahkan baca di sini.

Setelah semua proses diatas sudah anda lakukan dengan benar, sekarang coba klik salah satu gambar di dalam postingan, pasti gambarnya akan membesar. Nah, itu tadi tutorial membuat efek zoom pada gambar dengan sentuhan jQuery. Selamat mencoba dan semoga bermanfaat.

Socializer Widget By Blogger Yard

SOCIALIZE IT →

Tweet

FOLLOW US →

SHARE IT →