Cari di sini ....

Hi, guest ! welcome to hans-software!. | About Us | Contact | Register | Sign In

Jumat, 28 Oktober 2011

jjquery image magnify v1.1

Free
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 di sini.

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 meng-klik jquerymagnifier pilih file dan pilih save page as, lalu beri nama dan tambahkan kode .js setelah nama kode yang akan anda simpan, selanjutnya simpan file (di komputer anda).
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.
Share this article now on :

Posting Komentar

:)) ;)) ;;) :D ;) :p :(( :) :( :X =(( :-o :-/ :-* :| 8-} :)] ~x( :-t b-( :-L x( :-p =))

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).