
Cara membuat efek zoom pada gambar dengan jQuery Image Magnify v1.1 mungkin merupakan suatu alternatif yang perlu anda coba. Cara ini sesungguhnya simple gan, namun sekali lagi kalau ingin scripnya berfungsi dengan baik maka anda harus melakukan penyimpanan script di google code atau free file hosting lainnya. Gak papa khan gan cape dikit....tapi hasilnya bisa bikin om puas...!!! Mengenai cara penyimpanannya bisa anda baca di sini.
Efek zoomer ini dikembangkan oleh dynamicdrive.com dengan menggunkan jquery sehingga pembesan gambar akan terpisah dengan gambar asal. Anda bisa mengatur sendiri pembesar gambar sesuai keinginan anda. Sebelum kita melanjutkan silahkan lihat dulu demonya
Ok mari kita lanjutkan...Sebaiknya sediakan kopi dan pisang goreng dulu biar santai gan....Sudah...??? wwuuuudddss langsung kita ikuti jejaknya.
Log in ke blog anda
Klik Rancangan
Klik Edit HTML
Maukkan cript dibawah ini setelah kode ]]> dan Simpan Template
Langkah selanjutnya tinggal meletakkan javascript pada gambar yang ingin anda beri efek zoom. Caranya ketika anda ingin memposting artikel masuk ke Edit HTML lalu letakkan kode berikut ke dalamnya.
ocean.gif" class="magnify" style="width:200px; height:150px" />
Ganti tulisan berwarna biru dengan alamat gambar anda: contohnya
http://1.bp.blogspot.com/_9trGHDygXF0/R2DT7SmFahI/AAAAAAAAADQ/-BxtKUQNemo/s320/3.jpg"class="magnify" ....." />, lalu ganti kode berwarna hijau dengan ukuran yang anda inginkan....yang warna merah biarkan saja, karena itu script penghubung dengan javascript yang telah anda tanam dalam template anda...(emang pohon pake tanam segala...heee :)
Catatan Penting
Jika script ini gak jalan alias ngadat, seperti yang saya bilang di atas, anda harus melakukan penyimpanan script sendiri....dan itu ane yakin akan lancar kembali....
Setelah mengklik magnifycur pilih notepad dan simpan dengan nama di akhiri dengan kode .js
Download kode yang anda simpan tadi di file hosting anda...kalau belum tahu caranya silahkan baca di sini
Perhatikan kode yang di tanam dalam template anda tadi, seperti di bawah ini.
Efek zoomer ini dikembangkan oleh dynamicdrive.com dengan menggunkan jquery sehingga pembesan gambar akan terpisah dengan gambar asal. Anda bisa mengatur sendiri pembesar gambar sesuai keinginan anda. Sebelum kita melanjutkan silahkan lihat dulu demonya
Ok mari kita lanjutkan...Sebaiknya sediakan kopi dan pisang goreng dulu biar santai gan....Sudah...??? wwuuuudddss langsung kita ikuti jejaknya.
Log in ke blog anda
Klik Rancangan
Klik Edit HTML
Maukkan cript dibawah ini setelah kode ]]> dan Simpan Template
Langkah selanjutnya tinggal meletakkan javascript pada gambar yang ingin anda beri efek zoom. Caranya ketika anda ingin memposting artikel masuk ke Edit HTML lalu letakkan kode berikut ke dalamnya.
Ganti tulisan berwarna biru dengan alamat gambar anda: contohnya
Catatan Penting
Jika script ini gak jalan alias ngadat, seperti yang saya bilang di atas, anda harus melakukan penyimpanan script sendiri....dan itu ane yakin akan lancar kembali....
- jquerymagnifier
- magnifycur (untuk Internet Explorer browser)
Setelah mengklik magnifycur pilih notepad dan simpan dengan nama di akhiri dengan kode .js
Download kode yang anda simpan tadi di file hosting anda...kalau belum tahu caranya silahkan baca di sini
Perhatikan kode yang di tanam dalam template anda tadi, seperti di bawah ini.
Silahkan ganti kode warna merah dengan kode yang terdapat di file hosting anda sendiri. Kode merah pertama untukjquerymagnifier dan kode merah ke dua untuk magnifycur. Selnajutnya simpan template...untuk cara memberi efek zoom pada gambar, teknik sama dengan yang telah di terangkan sebelumnya. ok gan....selamat mencoba dan sukses selalu.
Posting Komentar
Informasi Pilihan Identitas:
Google/Blogger : Khusus yang punya Account Blogger.
Lainnya : Jika tidak punya account blogger namun punya alamat Blog atau Website.
Anonim : Jika tidak ingin mempublikasikan profile anda (tidak disarankan).