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.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 <!doctype html> <html lang="en"> <head> <!--Required meta tags--> <meta
charset="utf-8"> <meta name="viewport"content="width=device-width, initial-scale=1, shrink-to-fit=no"> <!--Bootstrap CSS--> <link
rel="stylesheet"href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"> <link rel="stylesheet"href="magnify.css"> <title>Zoom
Gambar dengan magnify.js</title> </head> <body> <div class="container"> <div
class="row"> <div class="col-md-6 mt-5"> <h2>Cara Membuat Zoom Gambar Menggunakan
Magnify.js</h2> <div class="card text-white"> <div
class="card-header bg-primary">Special Product</div> <div class="card-body bg-secondary"> <h5
class="card-title">Smartphone Zaman Now!</h5> <img src="image-s.jpg"data-magnify-src="image-x.jpg"> </div> </div> </div> </div>
</div> <!--OptionalJavaScript--> <script src="http://code.jquery.com/jquery-3.3.1.js"></script> <script
src="jquery.magnify.js"></script> </body> </html> pada script diatas tadi sudah download plugin JQuery magnify.js yang digunakan adalah file yang terlihat pada tampilan dibawah ini : 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 : Demikian pembahasan artikel kali ini tentang cara membuat zoom gambar menggunakan magnify.js , semoga bermanfaat dan selamat mencoba. terima kasih, |