AABI‍TALITA BLOG
3.24.2013

Membuat Efek Kaca Pembesar Pada Gambar

Tutorial yang mau saya bagikan kali ini adalah tentang cara membuat efek kaca pembesar (lup) pada gambar.efek ini akan mucul diatas gambar mengikuti gerakan mouse dan pembesarannya juga dapat disesuaikan (zoom in dan zoom out ) dengan menggunakan roda pada mouse.
Untuk lebih jelas silahkan lihat screenshot di bawah ini atau lihat demonya :

zoomimage


Nah jika sobat ingin mencobanya, berikut langkah pebuatannya :
1. Masuk Blogger >  Template > Edit HTML
2. Cari kode </head> lalu copas kode jquery 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>

Bila kode diatas sudah ada pada template sobat maka lewati saja langkah diatas.

3. Selanjutnya silahkan copas kode dibawah ini diatas kode </head>

<script src="https://abitalita.googlecode.com/files/zoomlup.js" type="text/javascript"></script>
<script type="text/javascript">
jQuery(document).ready(function($){
 $('#pembesargambar').perbesaran({
 sorotanu: 2,
 kisaranu: [2,10],
 anubesar: null,
 pembesaranu: [140,140]
})
})
</script>


3. Kemudian Simpan Template

4. Untuk menampilkan efek kaca pembasar sobat bisa gunakan kode berikut ini :

<img id="pembesargambar" src="http://1.bp.blogspot.com/-W_HkbxiL60M/UU54dDGJDlI/AAAAAAAAHZk/PEu5MnH5ppc/s1600/DSC_0720.JPG" style="height: 150px; width: 500px;" />


Keterangan :  - Ganti teks warna merah dengan URL gambar sobat.
                     - Sesuaikan tinggi dan lebar gambar dengan merubah teks warna biru.

Demikian cara membuat efek kaca pembesar pada gambar,semoga bermanfaat.Salam...!

11 komentar

Ijin kopas untuk dipelajarin lebih lanjut.

Mas kalo boleh bertanya bagaimana cara membuat related post berdampingan dengan banner iklan ???

#kunjugan malam mas

Terima kasih untuk info menariknya mas, btw saya izin copy scriptnya, rencana mau bikin postingan dengan tema yang sama. :)

silahkan mas irpan,thk sudah mampir disini :)

makasie sob,,,,,
jd tmbah ilmu nich,,,,

mampir mari yuk,,
vimax-shop.blogspot.com

sama sama sob,thk sudah mampir sy jga sudah singgah di toko onlinenya :-)

keren banget sooobbbb !! :d

akhirnya setelah mencari artekel agan yang bener , makasih gan :)

sama sama sob,makasih sdh nyempetin mampir :)

keren mas simple tapi oke

Terima kasih atas kunjungannya, silahkan berkomentar sesuai topik. Menuliskan link aktif tidak akan ditampilkan dalam komentar.Terima Kasih.