Efek Image Zoom dengan Jquery pada Bootstrap
Dalam tutorial ini, kita akan membuat sebuah image yang dapat dizoom dengan menggunakan jquery.
Dalam pembuatan tutorial efek image zoom, kita membutuhkan sebuah librari elevateZoom.js yang berfungsi untuk memberik efek zoom terhadap image yang kita pilih. Karena dalam perancangan GUI nya kita menggunakan Bootstrap, maka image-image kita tempatkan pada class thumbnail.
Disamping itu kita juga harus mempersiapkan satu buah image yang berukuran kecil (gambar yang tampil pertama kali sebelum diberi efek zoom) dan satu buah image berukuran besar yang berfungsi gambar yang diload untuk efek zoom.
Untuk memberikan efek zoom pada masing-masing image cukup diberikan id dari image tersebut seperti contoh dibawah ini :
<img id="zoom_01" src="img/small/image11.png" data-zoom-image="img/large/image1.jpg"alt="">Dan untuk memberikan efek zoomnya, kita buat kode jquery berdasarkan id dari image tersebut :
<script> $('#zoom_01').elevateZoom({ zoomType: "inner", cursor: "crosshair", }); </script>
Implementasi Efek Image zoom pada Bootstrap Thumbnail
Dalam percobaan image zoom ini, kita akan menggunakan dua thumbnail pada Bootstrap seperti yang ditunjukkan oleh Gambar.1 dibawah ini : |
| Gambar.1 |
Untuk kode lengkapnya :
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="author" content="ilmu-detil.blogspot.com"> <title>Image Zoom</title> <!-- Bagian css --> <link rel="stylesheet" href="assets/css/bootstrap.min.css"> <link rel="stylesheet" href="assets/css/ilmudetil.css"> <!-- Bagian js --> <script src='assets/js/jquery-1.10.1.min.js'></script> <script src="assets/js/jquery.elevatezoom.js"></script> <script src="assets/js/bootstrap.min.js"></script> </head> <body> <nav class="navbar navbar-default navbar-fixed-top"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span> </button> <a class="navbar-brand" href="index.html"> Pusat Ilmu Secara Detil</a> </div> <div class="navbar-collapse collapse"> <ul class="nav navbar-nav navbar-left"> <li class="clr1 active"><a href="index.html">Home</a></li> <li class="clr2"><a href="">Programming</a></li> <li class="clr3"><a href="">English</a></li> </ul> </div> </div> </nav> </br></br></br></br> <!--- Bagian Judul--> <div class="container" style="margin-top:30px"> <h2 >Contoh Image Zoom Secara Inner Pada Bootsrap Thumbnail</h2> <div class="row"> <div class="col-md-5"> <div class="thumbnail"> <img id="zoom_01" src="img/small/image11.png" data-zoom-image="img/large/image1.jpg"alt=""> <div class="caption"> <h3>Mercedes-Benz S-Class</h3> <p>Temukan Kenyamanan Dengan Mengendarai Bersama Mercedes-Benz S-Class terbaik.</p> <p><a href="#" class="btn btn-primary" role="button">Read More</a> <a href="#" class="btn btn-default" role="button">Download</a></p> </div> </div> </div> <script> $('#zoom_01').elevateZoom({ zoomType: "inner", cursor: "crosshair", }); </script> <div class="col-md-5"> <div class="thumbnail"> <img id="zoom_02" src="img/small/image22.png" data-zoom-image="img/large/image1.jpg"alt=""> <div class="caption"> <h3>Mercedes-Benz S-Class</h3> <p>Temukan Kenyamanan Dengan Mengendarai Bersama Mercedes-Benz S-Class terbaik.</p> <p><a href="#" class="btn btn-primary" role="button">Read More</a> <a href="#" class="btn btn-default" role="button">Download</a></p> </div> </div> </div> <script> $('#zoom_02').elevateZoom({ zoomType: "inner", cursor: "crosshair", }); </script> </div> </div> </body> </html>Seperti yang terlihat pada kode diatas, disini kita memiliki dua image dengan id :zoom_01 dan zoom_02, sehingga kita membuakan kode jquery untuk kedua id image tersebut seperti diatas.
