Membuat Efek Kaca Pembesar Pada Gambar

Aulia MP

On 3.24.2013 | 13.49.00 with 10 comments

Tutorial Blog

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 :

DEMO

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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSDpEIiIvujbyfiFquKL5d8Z2jUzUDfq55o0xi4GPu_BYGHBktSeUegjbuEiyzS2UqEUBKMaxUGYPXl9_W75dJFalGqmfGMWe6AIBmOHmIQFes-Dd_q9Rnrh-Wm3R3vwVx1-TkcjfSp0nR/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...!