Image Zoom (JQZoom) Untuk Blogspot

Berikut salah satu hack yang kreatif yang berhasil saya temukan, memperbesar gambar yang tampak kecil menjadi lebih detail seperti menggunakan lensa saat kursor diarahkan pada gambar. Gambar asli tampak sebelah kiri gambar asil zoom dan ini memudahkan kita untuk melihat objek kecil yang ada dalam gambar yang belum terlihat jelas.

Klik pada blog berikut untuk melihat contohnya:
Die-Silver Blog Experimental

Untuk pemasangannya, anda bisa mengikuti langkah berikut ini:

1. Login - Layout/Tata Letak - Edit HTML - Expand Template Widget
2. Cari kode berikut menggunakan (Ctrl+f)
   

   </head>

3. Letakkan kode berikut sebelum kode tadi:
   

   <!--JQZOOM-STARTS-->
   <script src="http://die-silver.googlecode.com/files/jquery-1.3.2.min.js" type="text/javascript"></script>
   <script src="http://die-silver.googlecode.com/files/jquery.jqzoom1.0.1.js" type='text/javascript'></script>
   <link rel="stylesheet" href="http://die-silver.googlecode.com/files/jqzoom.css" type="text/css" />
   <script type="text/javascript">
   $(function() {
   var options =
   {
   

   zoomWidth: 275,

   zoomHeight: 275

   }
   $(".jqzoom").jqzoom(options);
   var options2 =
   {
   

   zoomWidth: 275,

   zoomHeight: 275,

   zoomType:'reverse'
   }
   $(".jqzoom2").jqzoom(options2);
   });
   </script>
   <!--JQZOOM-STOPS-HELP@-http://www.ardi33.web.id/-->

   untuk setting default, ukuran gambar adalah 275x275px. Anda dapat mengubahnya sesuka hati.
4. Simpan Template

Sekarang pemasangan agar efeknya dapat kita rasakan. Caranya menambahkan class "jqzoom" pada tag a href.

Perhatikan penempatan link yang biasanya digunakan berikut ini:

<a href="LINK GAMBAR YANG LEBIH BESAR" title="IMAGE TITLE"><img src="LINK GAMBAR YANG LEBIH KECIL"/></a>

Untuk menggunakan zoom image, ubah link menjadi seperti ini:

<a href="LINK GAMBAR YANG LEBIH BESAR" class="jqzoom" title="IMAGE TITLE"><img src="LINK GAMBAR YANG LEBIH KECIL"/></a>

NOTE #1: Untuk menampilkan gambar dengan Reverse Opacity Effect, tambahkan class="jqzoom2" bukan class="jqzoom"

NOTE #2: Jika anda menggunakan trik ini, anda harus mempunyai dua gambar, satu kecil sebagai thumb yang diletakkan pada blog dan satunya yang besar sebagai gambar untuk men-detail-kan yang diletakkan dalam hyperlink.

Browser Support:
6+ | 2+ | 1.0 | 2+ | 9+ |

adopted from BloggerStop.Net