Langsung aja Sobat Arahkan Cursornya pada demo gambar disamping,Untuk Demo yang atas dengan mouse scroll sedangkan yang bawah tanpa mouse scrool,Untuk Kode Script dan CSS yang berwarna biru silahkan sobat utak-atik nilai-nilai Variabelnya, karena pada kode tersebut adalah kode dimana yang akan menghasilkan besar-kecil, efek dan ukuran Zoomnya.
Kodenya :
<style type="text/css">
.magnifyarea{
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript" src="https://sites.google.com/site/cuerosbhelat/image-zoom.jz.js">
</script>
<script type="text/javascript">
jQuery(document).ready(function($){
$('#gambar1').addimagezoom({
largeimage: 'http://i1206.photobucket.com/albums/bb455/binkbenk/miyabi1.jpg'
})
$('#gambar2').addimagezoom({
cursorshadeopacity: 0.3,
})
})
</script>
<img id="gambar1" border="0" src="http://i1206.photobucket.com/albums/bb455/binkbenk/miyabi1.jpg" />
<img id="gambar2" border="0" src="http://i1206.photobucket.com/albums/bb455/binkbenk/ichigo-in-orange.jpg" style="width:300px;height:225px" />
.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 type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript" src="https://sites.google.com/site/cuerosbhelat/image-zoom.jz.js">
</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://i1206.photobucket.com/albums/bb455/binkbenk/miyabi1.jpg'
})
$('#gambar2').addimagezoom({
zoomrange: [5, 5],
magnifiersize: [600,400],
magnifierpos: 'right',
cursorshade: true,
cursorshadecolor: 'blue',cursorshadeopacity: 0.3,
cursorshadeborder: '1px dashed red',
largeimage: 'http://i1206.photobucket.com/albums/bb455/binkbenk/ichigo-in-orange.jpg'})
})
</script>
<img id="gambar1" border="0" src="http://i1206.photobucket.com/albums/bb455/binkbenk/miyabi1.jpg" />
<img id="gambar2" border="0" src="http://i1206.photobucket.com/albums/bb455/binkbenk/ichigo-in-orange.jpg" style="width:300px;height:225px" />
Selamat Mencoba
Lihat sumbernya ; www.dynamicdrive,comPosted On : 3 Februari 2012 Time : 13.24
