Cotetan

Inspiration Start Here

Gallery

Loading...

Menampilkan sebuah foto dengan JQuery Zoom

, , , 2 komentar
Sekarang banyak toko-toko online yang bertebaran di dunia maya yang menjajakan beberapa barang dagangan mereka dengan tampilan yang sangat aktraktif seperti pada gambar di bawah ini.
Haah, ingin membuatnya apa mari ikuti langkahnya sebagai  berikut:

langkah 1.
Buatlah 2 gambar dimana ada yang besar dan kecil seperti berikur ini":

kecil.jpg
besar.jpg
langkah 2
Ini nih jurus jitu buat menghasilkan gambar yang mashur dan makyus pokoknya


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>jqzoom : &lt;default&gt;</title>
<script type='text/javascript' src='jquery-1.3.2.js'></script>
<script type='text/javascript' src='jquery.jqzoom1.0.1.js'></script>
<link type='text/css' href='jqzoom.css' rel='stylesheet'/>
</head>

<body>
<script type="text/javascript">
$(document).ready(function(){
      var options ={
      zoomType: 'standard',
      zoomWidth: 200,        
      zoomHeight: 200,    
      xOffset: 10,    
      yOffset: 0,
      position: "right" ,
      lens:true,
      lensReset : false,
      imageOpacity: 0.2,
      title : true,
      alwaysOn: false,
      showEffect: 'show',
      hideEffect: 'hide',
      fadeinSpeed: 'medium',
      fadeoutSpeed: 'medium',
      preloadImages :true,
      showPreload: true,
      preloadText : 'Loading zoom',
      preloadPosition : 'center'
      }
      $(".myvalue").jqzoom(options);
      
      });
</script>
<a href="foto1.jpg" class="myvalue"  title="foto coretan">
      <img src="foto.jpg" title="Foto coretan"  >
      </a>
</body>
</html>




DEMO  | DOWNLOAD


















































2 komentar
                    :
                  








  1. Badwi6 Juli 2013 pukul 10.17
    kok gak pake jQuery thumbnailer buat bikin gambar kecilnya?  [-(
    BalasHapus
  2. Unknown7 Juli 2013 pukul 14.06
    di buat agar lebih sderhana, tu juga belum ada, contoh demonya. belum sempat ambil upload contohnya
    BalasHapus































Langganan:

Posting Komentar
                      (
                      Atom
                      )