Cara Membuat Efek Kaca Pembesar Pada Gambar

Monday, November 26, 2012




bruakakakakaka numpang ngakak dap, maksa bgt ngeditnya
gambar diatas dapet dari salah satu fp fans jkt48, buat hiburan :D
haduh malah oot !!! ok, balik ke topic

Nah, kali ini aku akan berbagi cara membuat sebuah efek seperti "kaca pembesar" yang muncul di atas gambar mengikuti kursor mouse. Selain itu, daya perbesaran dapat disesuaikan sesuai keinginan dengan memutar roda mouse yg memungkinkan pengguna untuk zoom in atau zoom out.

Berikut ini adalah contohnya

JKT48 Gen 2 (foto:Kompasiana)


untuk membuat efek seperti di atas
Pertama masuk Blogger >  Template > Edit HTML
cari kode </head> lalu copas kode di bawah ini di atas kode </head>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script src="http://haidarax.googlecode.com/files/perbesargambar.js" type="text/javascript"></script>
<script type="text/javascript">
jQuery(document).ready(function($){
 $('#gambaranu').perbesaranunya({
 sorotanu: 2,
 kisaranu: [2,10],
 anubesar: null,
 pembesaranu: [140,140]
})
})
</script>

kemudian simpan

tahap berikutnya kamu harus menysisipkan kode id="gambaranu" pada Html gambar agar gambar terkena efek kaca pembesar

Contoh

<img id="gambaranu" src="http://stat.ks.kidsklik.com/statics/files/2012/11/13518932071679740938.jpg" style="height: 300px; width: 400px;" />

Selamat Mencoba Dap

13 komentar:

  1. wkwkwkwk gambarnya pak jokowi unyu sekali gan..:D
    weh efeknya juga keren gan..:)
    gak bisa bulat ya itu efek kaca pembesarnya?

    ReplyDelete
    Replies
    1. ntar kalau bisa, ane share tutornya gan :D

      Delete
  2. Replies
    1. knp mas cekikikan kayak gitu ?
      hedeheheheheh

      Delete
  3. canggih :D

    wahh kayanya musti berguru lagi nih >,<

    ReplyDelete
    Replies
    1. ah, mas bisa aja nih
      aku juga masih belajar kok :D

      Delete
  4. boleh juga di coba kawan. tapi kalu themplate blognya gak seperti blog sobat apa bisa bagus hasilnya sob? saya pingi nyoba nih...hehehe

    terimakasih sudah berbagi.

    ReplyDelete
    Replies
    1. template gk ngaruh kok sob
      silahkan di coba saja :D

      Delete