Zoom tentu tidak asing ditelinga kita, Zomm biasanya akrab dengan memperbesar bagian sebuah gambar. lihat contoh berikut...
Gimana Lumayan scrip ini bisa diterapkan, kebetulan pas jalan jalan ketemu kikiyo. Keto apik ya langsung coba eh...h lumayan. Liaht ja dulu Scrip nya..
+ Scrip Code
<style type="text/css">
.magnifyarea{ /* Script by www.kikiyo.co.cc Dont Change*/
box-shadow: 5px 5px 7px #818181;
-webkit-box-shadow: 5px 5px 7px #818181;
-moz-box-shadow: 5px 5px 7px #818181;
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="http://wwwkikiyococc.googlecode.com/files/featuredimagezoomer.js">
</script>
<script type="text/javascript">
jQuery(document).ready(function($){
$('#image1').addimagezoom({
zoomrange: [3, 10],
magnifiersize: [300,300],
magnifierpos: 'right',
cursorshade: true,
largeimage: 'http://i44.tinypic.com/11icnk5.jpg' //<-- Ganti dengan Masukan UrL Gambar Anda
})
$('#image2').addimagezoom({
zoomrange: [5, 5],
magnifiersize: [400,400],
magnifierpos: 'right',
cursorshade: true,
cursorshadecolor: 'pink',
cursorshadeopacity: 0.3,
cursorshadeborder: '1px solid red',
largeimage: 'http://i44.tinypic.com/11icnk5.jpg' //<-- Ganti dengan UrL Gambar Anda
})
$('#image3').addimagezoom()
})
</script>
<p><img id="image1" border="0" src="http://i44.tinypic.com/11icnk5.jpg" style="width:300px;height:225px" /><p>
Gunakan gambar yang anda inginkan pada Ganti URL gambar dengan upload gambar di web hosting picture.
0 komentar:
Posting Komentar