Efek Image Zoom dengan Jquery

Seperti temen-temen ketahui, banyak sekali cara untukmemodifikasi 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.
view plainprint?
1. <script  type='text/javascript'  src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js'/>  
2. <script  type="text/javascript"  src="http://imagezoomnobi.googlecode.com/files/jquery.imageZoom.min.js"/>  
3. <script type="text/javascript">  
4. jQuery(document.body).imageZoom();  
5. </script>  

<script  type='text/javascript'  src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js'/>

<script  type="text/javascript"  src="http://imagezoomnobi.googlecode.com/files/jquery.imageZoom.min.js"/>
<script type="text/javascript">
jQuery(document.body).imageZoom();
</script>

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

Sekarang temen-temen coba klik salah satu gambar di dalam postingan, pasti gambarnya akan membesar. Nah, itu tadi tutorial hari ini. Selamat mencoba dan semoga bermanfaat

• domain host
• tutorials
• blogs
• klik
• online shop
• pet adoption
• closes

Jika Anda menyukai Artikel di blog ini, Silahkan
klik disini untuk berlangganan gratis via email, dengan begitu Anda akan mendapat kiriman artikel setiap ada artikel yang terbit di Creating Website