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
<!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.
1 Comments
This comment has been removed by the author.
ReplyDeleteBerkomentarlah dengan baik dan sopan