Coba Anda Arahkan kursor mouse anda pada gambar diatas, maka gambar secara langsung akan muncul sebuah gambar disebelah kanan yang memperlihatkan detil gambar dari gambar diatas, menjadi lebih jelas dan besar.. Oke... gak usah panjang lebar lagi langsung copy paste saja script kodenya dibawah... Script kode Gambar Zoomer
<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 (Script by www.kikiyo.co.cc)
})
$('#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 (Script by www.kikiyo.co.cc)
})
$('#image3').addimagezoom()
})
</script>
<p><img id="image1" border="0" src="http://i44.tinypic.com/11icnk5.jpg" style="width:300px;height:225px" /><p>
Ket : Tulisan yang berwarna kuning adalah alamat url gambar, anda dapat menggatinya sesuai gambar yang anda inginkan.
Tidak ada komentar:
Posting Komentar