Tips & Trik - Kali ini kita akan mencoba memasang efek pembesaran (zooming) pada gambar di blog kita dengan menggunakan script expando. Expando dikembangkan oleh Dynamic Drive dengan memanfaatkan engine jquery. Sebenarnya script ini bukan hanya digunakan untuk melakukan pembesaran pada gambar saja, tetapi juga bisa digunakan untuk hal yang sebaliknya, yakni mengecilkan gambar.
Cara kerja expando adalah mengembalikan gambar pada ukuran aslinya. Pejelasaannya demikian, jika kita memiliki sebuah gambar dengan ukuran 176px X 220px, agar expando memberi efek pembesaran maka aturlah pamasangan gambar dengan ukuran yang lebih kecil dari gambar aslinya, misalnya mejadi 112px X 139px, dan sebaliknya, jika anda menghendaki untuk efek pengecilan, maka aturlah pemasangan gambar agar memiliki ukuran yang lebih besar dari aslinya. Silahkan lihat contoh gambar berikut ini;
Gambar ini memiliki ukuran asli 176px X 220px, lalu kami pasang dengan ukuran 112px X 139px dan telah kami beri efek expando. Silahkan anda arahkan kursor pada gambar tersebut, lihatlah... gambar kembali ukuran semula 176px X 220px (efek pembesaran). Ini berlaku sebaliknya pada gambar di bawah ini, yang telah kami pasang dengan ukuran 267px X 333px, jika anda arahkan kursor kepadanya, maka gambar akan kembali ke ukuran aslinya (efek pengecilan).
Sudah mendapatkan gambaran yang jelas mengenai penggunaan script expando?. Baiklah, sekarang saatnya kita mencoba memasang script expando ini pada blog kita masing-masing.
Pertama, download file script expando.zip ini lalu extract file tersebut sehingga Anda mendapatkan file expando.js dan upload file expando.js itu ke web hosting Anda. Jika anda belum memiliki tempat penyimpanan online (hosting), anda bisa memanfaatkan hosting web gratis yang disediakan oleh Google melalui sites.google.com atau menyimpannya di google code, silahkan lakukan pendaftaran dengan mengikuti langkah-langkah yang diberikan.
Langkah kedua, pasang script seperti contoh berikut ini pada template html anda, letakkan script diantar kode <head> sebelum kode </head>.
Sesuaikan src='http://hosting.anda.com/expando.js' dengan lokasi tempat Anda menghosting file expando.js. Simpan perubahan yang telah anda lakukan.
Berikut ini adalah cara menambahkan script expando pada gambar. Tambahkanlah kode class="expando" pada setiap gambar yang ingin anda beri efek, ini contohnya;
Selamat mencoba....
Hmmm... apa yang harus aku mulakan...
Aku bermimpi suatu hari aku pergi ke surga dan seorang malaikat menemaniku serta menunjukkan keadaan di surga...
Hari ini aku bersedih, bersedih atas segala kebodohan, kesalahan dan kekhilafan yang telah aku lakukan...
7 Komentar:
mahu buat juga :p .. nanti tolong ye :p
Mantap brader ^_^
waw mantap picnya saya coba yah
kq blom jg ya bos...
@Zul: selamat datang... hmmm.. tidak begitu jelas dengan apa yang Anda maksud.. :D
bos, qo di blog saya bisa nih tapi waktu pertengaahan loading page, gambar nya bisa zooming tapi pas loading page uda beres malah engga bisa lagi, kira-kira kenapa yah ? uda bener-bener ngikutin langkah-langkahnya ..,
tks sebelumnya
@DY: Coba Anda refresh halaman bergambar yang Anda beri efek expando.. coba jangan sentuh gambar hingga halaman selesai diload.. :)