Cara Membuat Image Zoom Dengan Jquery Image Zoom

Aguzrybudy January 31, 2017

Assalmualaikum Warahmatullahi Wabarakatu
Bismillahirrahmanirrahiim

Pada postingan ini saya akan membahas tips Cara Membuat Image Zoom Dengan Jquery Image Zoom. Image Zoom adalah gambar yang apa bila kita mouse hover, atau memposisikan mouse kita diatas gambar maka akan melihat detail dari gambar tersebut. Oke langsung saja

Langkah Pertama
Download file-file yang diperlukan disini, didalam zip/rar terdapat empat folder yaitu css, js, images, fonts

Langkah Kedua
Extractlah hasil download file diatas di root folder server lokal milik sobat, atau di hosting jika punya juga bisa

Langkah Ketiga
Ketiklah kode dibawah ini, simpan dengan nama index.html, jika sobat ingin melihat type dari image zoom dibawah ini bisa kunjungin website resminya disisni http://www.elevateweb.co.uk/image-zoom/examples

1234567891011121314151617181920212223242526272829303132333435363738394041424344<!DOCTYPE html>
<html lang="">
 <head>
   <!-- Required meta tags always come first ---->
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Image Zoom</title>

  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="css/bootstrap.css">
  <style type="text/css">
   #zoom{
    width:100%;
    height: auto;
   }
  </style>
 </head>
 <body>

  <div class="containter">
   <div class="row">
    <div class="col-md-6 col-md-offset-3">
    <h1 class="text-xs-center">Image Zoom</h1>
    <img id="zoom" src="images/zoom.jpg" data-zoom-image="images/zoom.jpg"/>
    </div>
   </div>
  </div>
  
  <!-- jQuery -->
  <script src="js/jquery.min.js"></script>
  <!-- Bootstrap JavaScript -->
  <script src="js/bootstrap.js"></script>
  <script src="js/jquery.elevateZoom-3.0.8.min.js"></script>
  <script type="text/javascript">
   //script untuk menampilkan image zoom
   $("#zoom").elevateZoom({
     zoomType : "lens",
     lensShape : "round",
     lensSize    : 300 
   });
  </script>
 </body>
</html>

Langkah Keempat
Jika sobat sudah siap mengetik kode diatas, jalankanlah atau eksekusi melalui web browser milik sobat, maka sobat akan melihat hasilnya seperti gambar dibawah ini.

Jika sobat membutuhkan kode aplikasi diatas silahkan download melalui button dibawah ini. Semoga tutorial tips ini bermanfaat bagi sobat, atas segala kekuranganya mohon dimaafkan.

NB : Jika link rusak atau gak bisa download silahkan tinggalkan komentar.