Pada kesempatan kali ini saya akan membahas tentang cara membuat zoom gambar menggunakan magnify.js . Dalam kasus kali ini digunakan saat untuk melihat detail dari sebuah obyek pada gambar ,jadi saat mouse mendekati gambar akan muncul seperti lensa pembesar. Dan contohnya saat sahabat sekalian mampir ke sebuah website e-commerce melihat detail product yang di jual.Langkah pertama cara membuat zoom gambar menggunakan magnify.js yaitu sahabat harus persiapkan dulu template bootstrapnya, dan coba donwload plugin dari JQuery magnify.js disini karena sudah disediakan dari JQuery, selanjutnya membuat html seperti script di bawah ini.

pada script diatas tadi sudah download plugin JQuery magnify.js yang digunakan adalah file yang terlihat pada tampilan dibawah ini :

Cara Membuat Zoom Gambar Menggunakan Magnify.js

Langkah selanjutnya ketikan script dari javascript seperti dibawah ini:

Jadi script diatas berfungsi pada saat mouse mendekati aera gambar yang sudah dipersiapkan, gambar yang harus disiapkan harus 2 ukuran yang berbeda jadi gambar 1 yang ditampilkan pada browser ukuran kecil dan gambar 2 saat ada efek mouse ukuran dibuat lebih besar dari gambar 1, maka jika sudah benar sahabat bisa melihatnya pada tampilan seperti berikut :

Cara-Membuat Zoom-Gambar Menggunakan Magnify.js

Demikian pembahasan artikel kali ini tentang cara membuat zoom gambar menggunakan magnify.js , semoga bermanfaat dan selamat mencoba.

terima kasih,

 

WhatsApp chat