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;" />
.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
0 komentar
Posting Komentar