Cara Membuat Efek Zoom Yang Sederhana

Efek ini hanya menggunakan 1 (satu) gambar saja dalam

prosesnya pembuatannya. Sedangkan dalam pemakaian-

nya efek ini bisa mencapai 4 (empat) kali pembesaran

(zoom) gambar. Artinya, tidak seperti kebanyakan efek

zoom lainnya yang kerap memakai beberapa gambar

dalam proses pembuatannya. Dengan dilengkapi ikon

seperti kaca pembesar dan pengecil di sudut kanan

bawah, semakin menambah indah tampilan efek ini.
Ikon inilah yang anda klik untuk memperbesar atau
memperkecil gambarnya. Oh ya satu lagi kelebihan
efek ini, yaitu gambarnya dapat digeser, sehingga anda

dapat melihat bagian mana saja yang anda ingin lihat.

Untuk membuat efek ini tidaklah begitu sulit, caranya :

1.   Masuk ke Edit HTML

2.   Cari kode </head>

3.   Letakkan kode berikut ini di atasnya,
      kemudian simpan template anda.

<style type="text/css"> /*Default CSS for pan containers*/ .pancontainer{ position:relative; /*keep this intact*/ overflow:hidden; /*keep this intact*/ width:300px; height:300px; border:1px solid black; } </style><br /> <br /> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script><br /> <br /> <script type="text/javascript" src="http://h1.ripway.com/syamsudin/imagepanner.js"></script>

KETERANGAN :

*    Aturlah width: dan height:
     sesuaikan dengan gambar anda

*    Bila perlu, ubah juga ukuran border: & warnanya
     sesuai dengan selera anda.

4.  Masuk Rancangan -> Tambah Gadget,
     dan pilihlah HTML/JavaScript.

<div class="pancontainer" data-orient="center" data-canzoom="yes" style="width:400px; height:300px;"><img src="http://i44.tinypic.com/1hezvm.jpg" style="width:700px; height:525px" /><br /> </div>

KETERANGAN :

*    Ganti dan masukkan gambar anda pada kode :
     "http://i44.tinypic.com/1hezvm.jpg"

*    Atur juga width: dan height:
     sesuaikan dengan gambar milik anda

Akhirnya saya ucapkan, selamat mencoba

Semoga saja anda suka, good luck!