Mau tau cara buat yang seperti ini, silahkan klik disini

widget by Kianhome
Tutorial ini tanpa sengaja k'ian dapatkan dari Dynamic Drive dalam artikelnya jQuery Magnify Imager v1.1 beberapa hari yang lalu. Dan secara tidak sengaja pula k'ian berhasil menerapkannya disalah satu blog k'ian (All About Kian) dalam salah satu postingan yang k'ian buat. dari pada kelamaan kamu bisa lihat demonya disini.

Dari contoh demo diatas, k'ian akan mencoba menjelaskan sedikit mengenai fungsi dari script ini. yaitu : Script magnify berfungsi membuat gambar menjadi besar atau dizoom ketika salah satu gambar diklik, hal ini ditandai dengan munculnya gambar kaca pembesar ketika kursor mouse kita arahkan kesalah satu gambar. sebagai contoh :
arahkan kursor dan klik gambar
Arahkan kursor mouse kamu pada gambar diatas, kemudian klik. maka kamu akan melihat gambar diatas membesar 3x lipat dari ukuran gambar aslinya. Cara ini sungguh efektif untuk mempermudah pengunjung melihat gambar-gambar atau foto-foto yang mereka inginkan tanpa harus membuka jendela baru pada browser kita. Langkah yang bisa kamu lakukan untuk mendapatkannya cukup dengan meng-copy kode bawah ini..
Kemudian masuk ke menu Layouts-->> edit HTML -->> dan letakkan diatas kode </head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="http://sites.google.com/site/kianbersama/javascript/jquery.magnifier.js">
</script>
Selanjutnya simpan.

Langkah berikut adalah penerapan pada gambarnya :
  • Ambil URL gambar yang akan kamu pasang, contoh :
<img src="http://i317.photobucket.com/albums/mm393/d_otherside_band/header.jpg"/>
  • Kemudian tambahkan kode class="magnify" didalam kode URL gambar tadi. maka hasilnya akan sebagai berikut :
<img src="hhttp://i317.photobucket.com/albums/mm393/d_otherside_band/header.jpg" class="magnify"/>
Kode class="magnify" harus selalu kamu tambah pada setiap URL gambar yang akan kamu posting atau tampilkan.

Nb : jika ingin memasang banyak gambar dengan ukuran yang sama atau dengan ukuran yang kamu inginkan. bisa kamu tambahkan kode width="....px;" height="...px;". maka jika kode ini kita tambahkan didalam URL gambar dengan ukuran 100 x 150 (lebar=100 dan tinggi=150), maka kodenya akan menjadi seperti ini.
<img src="http://i317.photobucket.com/albums/mm393/d_otherside_band/header.jpg" class="magnify" width="100px;" height="150px;"/>
Lakukan perubahan ukuran gambar sesuai dengan keinginan kamu. selamat mencoba dan jangan lupa comment.

Update : Kamu juga bisa meletakkan kode tsb sesudah kode <head>
contohnya :
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="http://sites.google.com/site/kianbersama/javascript/jquery.magnifier.js">
</script>


Share to :

Related Post :


About the Author :

K'ian is a designer, web tutorial design, and blogging enthusiasts. Tutorial blog debut the first time when entering college, when I get to know the world wide internet and so much more. Now I work at one of the state trading company, a job that would conflict with the world of blogging and web design. Today remains a serious manage blog " Kolam Blogging Tips | Kianhome ".

14 Response to "Efek zoom pada gambar dengan JQuery Magnify"


  1. Kian Coi Said,

    sONiC42 : weeeddeeewwww...baru aja diposting udah disamber aja,,heeee heeeeee...semoga bermanfaat sob...!!!! ...Replay

     

  2. Rizky Said,

    cocok nih sob, kapan2 tak coba aq saat ni masih fokus nulis riview buat nyari recehan dollar ...Replay

     


  3. dari dynamic drive yah effek zoomnya ini (perasaan ada yg baru tuh)
    kalau ngomongin jquery aku ada seabrek-abrek sob...pusing bagus2 semuanyah...wkwkwkwkwkwkwkwk
    kotak komentarnya ada 2 kek aku nih...hihihihihi bagus...wkwkwkwkwkwk ...Replay

     

  4. Kian Coi Said,

    @Rizky, Manga Naruto Indonesia, Beben: silahkan ajA sob di coba, untuk tutorial yg lain bkl k'ian posting dilain waktu..4all tq bt commentnya...!!!! ...Replay

     

  5. vhei Said,

    ini yg bisa bikin cantik tampilan blog...!!! cayo mazz..!!! ...Replay

     

  6. sasbrush Said,

    sip mas!!dah aku coba tapi kalau nambah keterangan gambar ditambah kode apalagi ya..soalnya aku naruh gambarnya banyak banget..jadi pas di bawah gambar gitu...maklum jualan hehehehe.
    thanks berat mas.... ...Replay

     


  7. Unknown Said,

    Tips a OK sob...! udh lama ni cari tips ini baru ketemu disini..he
    mksh sob..! klo berkenan blogwalking ketmptqu ya ?? he ...Replay

     

  8. Kian Coi Said,

    @ Berbagi kreatifitas : Makasih sob, semoga bermanfaat buat kamu...tq da comment..!!! ...Replay

     

  9. Unknown Said,

    @Kian Coi ad tips lain g sob..? untuk peletkn code yg di atas </body> selain diats code </body> mungkin.. bntu y ? btw aqu dah follow km.. klo berkenan follow back ya ?? he ...Replay

     

  10. Kian Coi Said,

    @Berbagi KreativitasPertanyaan kamu sudah aq jawab....!!! silahkan dicoba dan lihat hasilnya...!!!! ...Replay

     

  11. butuh banget nih yang seperti ini...thanks ya... ...Replay

     

Post a Comment

Blog ini menganut sistem "Dofollow", Silahkan Tinggal komentar, saran, kritik disini.. apapun itu jangan SPAM ok..


Berita Terkini

Friend Follower's

Tips Health

Techno

Hot Nasional

Celebrity

My Blog List

Recent Comment

© Copyright 2011 | Dikelola sepenuhnya oleh : Kiancoi
KianHome Member of PlanetBlog | SitusBersih | Support on Mozilla Firefox and Google Crome Browser
Home | Posts RSS | Comments RSS | Sexy Blog |