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 arahkan mouse  pada gambar dibawah ini :


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/AVvXsEj0d9ZbRT1pizLrvsXzXuIsF7SW6a3bHkcmQVteyUxP7Z3HJ9dc2g-3Y0A2a699eafkXjOJpP44rYoD9vDlN4aeUuySIcATaujFCfKTQfqaCtxpnd85vw7Tt-xINyabdZGc7zQgCEvZanus/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...!
Share artikel ke: Facebook Google+ Twitter Digg Lintaskan
Label:

0 komentar:

Posting Komentar

Langganan: Posting Komentar (Atom)