Perbesar Bidikan Zoom Gambar

Kode yang digunakan untuk membuat cohtoh di atas adalah :

<style type="text/css">
.magnifyarea{
box-shadow: 0 0 20px #000;
-webkit-box-shadow: 0 0 20px #000;
-moz-box-shadow: 0 0 20px #000;
filter: progid:DXImageTransform.Microsoft.dropShadow(color=#818181, offX=5, offY=5, positive=true);
background: white;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript"></script>
<script src="https://overlay-basic.googlecode.com/svn/branches/amarajen-zoom.jz.js" type="text/javascript">
</script>
<script type="text/javascript">
jQuery(document).ready(function($){
 $('#gambar1').addimagezoom({
  zoomrange: [3, 10],
  magnifiersize: [400,400],
  magnifierpos: 'right',
  cursorshade: true,
  cursorshadeborder: '1px dashed red',
  largeimage: 'http://media.dinomarket.com/docs/imgusr/2012-11/Anak_Sungai_Kecil_90cm_X_150cm_Rp5200000_201112121130_ll.jpg.jpg'
 })
 $('#gambar2').addimagezoom({
  zoomrange: [5, 5],
  magnifiersize: [600,400],
  magnifierpos: 'right',
  cursorshade: true,
  cursorshadecolor: 'blue',
  cursorshadeopacity: 0.3,
  cursorshadeborder: '1px dashed red',
  largeimage: 'https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcRt0d3a8DroXosVpodLSX9mEMan9RL4UQN2DN1mdehlM2exMr8ymg'
 })
})
</script>
<img border="0" src="http://media.dinomarket.com/docs/imgusr/2012-11/Anak_Sungai_Kecil_90cm_X_150cm_Rp5200000_201112121130_ll.jpg.jpg" id="gambar1" />
<img border="0" src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcRt0d3a8DroXosVpodLSX9mEMan9RL4UQN2DN1mdehlM2exMr8ymg" id="gambar2" style="height: 225px; width: 300px;" />

Artikel Terkait