Boostrap Image Zoom dengan Jquery FancyZoom

Pada tutorial sebelumnya kita telah membahas cara pembuatan image zoom secara inner dengan menggunakan jquery elevatezoom.

Jika dalam website kita memiliki fitur kumpulan galeri foto dan jika diklik pada salah satu foto, maka foto tersebut akan terzoom dan berada pada posisi tengah, maka penggunakan jquery fancyzoom sangat tepat untuk model zoom tersebut.

Berikut ini adalah ouput yang akan kita bahas dalam tutorial kali ini, seperti yang ditunjukkan oleh Gambar.1 dibawah ini :

Gambar.1

Jika anda perhatikan Gambar.1, terdapat tiga buah gambar, dan apabila diklik pada salah satu gambar maka gambar tersebut akan dizoom. Untuk penerapan model seperti ini kebanyakan web e-commerce ataupu web magazine menggunakan jquery fancyzoom.

Langkah-langkah membuat Image Zoom dengan Jquery FancyZoom

Disini kita akan asumsikan anda telah memiliki / mengdownload jquery fancyzoom, pada bagian download kami telah sertakan source code secara lengkap. Disamping itu, pembuatan interface secara keseluruhan menggunakan Bootstrap.

1. Persiapkan 2 Gambar yang berbeda.
Anda harus memiliki dua gambar yang berbeda, satu yang berukuran kecil dan satu lagi berukuran besar untuk file gambar yang sama.

2. Create file index.html
Pada tahap ini, kita akan memangil file css untuk fancyzoom.css dan file jquery.fancyzoom.js serta memanggil kedua gambar yang berbeda tersebut.

Dalam contoh ini, file fancyzoom.css berada dalam folder assets/css/fancyzoom.css, maka pemanggilanyanya :

<link rel="stylesheet" href="assets/css/fancyzoom.css"/>

Sedangkan untuk file jquery.fancyzoom.js berada pada folder assets/js/fancyzoom.js, maka pemanggilannya :

<script src="assets/js/jquery.fancyzoom.js"></script>

Kemudian memangil file gambar :

<div class="thumbnail">
    <a href="img/dashboard-big.png"><img src="img/dashboard-thumb.png" ></a>
</div>

Yang perlu diperhatikan, jangan melakukan pemanggilan gambar dengan model kode seperti dbawah ini, padahal maksud anda agar kode menjadi lebih rapi ragi :

<div class="thumbnail">
   <a href="img/dashboard-big.png">
     <img src="img/dashboard-thumb.png" >
  </a>
</div>

Kalau kita perhatikan tidak ada kode yang berubah, namun file jquerynya akan menganggap ada spasi sehingga efek zoom tidak akan terbentuk.

Kemudian tempatkan kode berikut dibawah kode pemanggilan jquery :

<script>
      $(document).ready(function() {
        $("a").fancyZoom();
      }); 
</script>

Complete source code

<!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>Load More Using Ajax </title>
    <!-- Bagian css -->
    <link rel="stylesheet" href="assets/css/bootstrap.min.css">
    <link rel="stylesheet" href="assets/css/ilmudetil.css">
    <link rel="stylesheet" href="assets/css/fancyzoom.css"/>
    
</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:40px"> 

    <div class="row">
       
        <div class="col-md-4">
            <div class="thumbnail">
                <a href="img/code-big.jpg"><img src="img/code-thumb.jpg"></a>   
            </div>
        </div>
        
        <div class="col-md-4">
            <div class="thumbnail">
               <a href="img/agenda-big.png"><img src="img/agenda-thumb.png" ></a>
            </div>
        </div>
        
        <div class="col-md-4">
            <div class="thumbnail">
               <a href="img/dashboard-big.png"><img src="img/dashboard-thumb.png" ></a>
            </div>
        </div>
    </div>
        
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

<script src="assets/js/jquery.fancyzoom.js"></script> 
<script>
      $(document).ready(function() {
        $("a").fancyZoom();
      }); 
 </script>
 

<div class="navbar navbar-default navbar-fixed-bottom footer-bottom">
   <div class="container text-center">
      <p class="text-center">Copyright &copy; 2016,  DTC. Developed by <a href="https://ilmu-detil.blogspot.com/">Pusat Ilmu</a></p>
   </div>
</div>
</body>
</html>

Boostrap Image Zoom dengan Jquery FancyZoom

Langkah-langkah membuat Image Zoom dengan Jquery FancyZoom

Complete source code

0 Response to "Boostrap Image Zoom dengan Jquery FancyZoom"

Posting Komentar