Cara Buat Gambar Zoomer

Kali ini Saya akan berbagi tips Cara Buat Gambar Zoomer, yaitu gambar secara langsung akan muncul sebuah gambar disebelah kanan yang memperlihatkan detil gambar dari gambar tersebut, menjadi lebih jelas dan besar, baiklah langsung copy paste saja script kodenya
dibawah ini dan untuk Demonya silahkan Lihat disini terserah anda mau ditempatkan dimana... disidebar ataupun dipostingan dibawah ini Code scriptnya...

<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;
"Times New Roman",serif; text-align: justify;">
}

</style>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript">

</script>

<script src="http://wwwkikiyococc.googlecode.com/files/featuredimagezoomer.js" type="text/javascript">

</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' //(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' //(Script by www.kikiyo.co.cc)

})

$('#image3').addimagezoom()

})

</script>

<img border="0" id="image1" src="http://i44.tinypic.com/11icnk5.jpg" style="height: 225px; width: 300px;" />

Ubahlah yang berwarna MERAH sesuai keinginan Anda

Dan semoga bermanfa'at...

<<SEBELUMNYA                                                                              DAFTAR ISI                                                                             BERIKUTNYA>>