Cara Membuat Zoom Gambar Menggunakan Magnify.js -

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.

<!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">
            <h1>Cara Membuat Zoom Gambar Menggunakan Magnify.js</h1>
                <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>

    <!-- Optional JavaScript -->
    <script src="http://code.jquery.com/jquery-3.3.1.js"></script>
    <script src="jquery.magnify.js"></script>
    

  </body>
</html>

<!doctype html>

<head>

<title>Zoom Gambar dengan magnify.js</title>

</head>

<body>

<h1>Cara Membuat Zoom Gambar Menggunakan Magnify.js</h1>

<div class="card-header bg-primary">Special Product</div>

<h5 class="card-title">Smartphone Zaman Now!</h5>

</div>

</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:

<script>
        $(document).ready(function() {
          $('img').magnify();
        });
    </script>

$(document).ready(function() {

$('img').magnify();

});

</script>

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,

Cara Membuat Zoom Gambar Menggunakan Magnify.js

Facebook DUMET School

Categories