Makee72
image zoom
Kuvien zoomaus script
Lataa alla oleva tiedosto ja kuva palvelimellesi
featuredimagezoomer.js
Lisää alla oleva koodi <HEAD> tagien sisään.
<style type="text/css">
.magnifyarea{ /* CSS to add shadow to magnified image. Optional */
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="featuredimagezoomer.js">
/***********************************************
* Featured Image Zoomer (w/ adjustable power)- By Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
***********************************************/
</script>
<script type="text/javascript">
jQuery(document).ready(function($){
$('#image1').addimagezoom({
zoomrange: [3, 10],
magnifiersize: [300,300],
magnifierpos: 'right',
cursorshade: true,
largeimage: 'kuva1.jpg' //<-- No comma after last option!
})
$('#image2').addimagezoom({
zoomrange: [5, 5],
magnifiersize: [400,400],
magnifierpos: 'right',
cursorshade: true,
cursorshadecolor: 'pink',
cursorshadeopacity: 0.3,
cursorshadeborder: '1px solid red',
largeimage: 'kuva2.jpg' //<-- No comma after last option!
})
$('#image3').addimagezoom()
})
</script>
Laita kuvien polku kohtiin -> largeimage: 'kuva1.jpg' ja/tai largeimage: 'kuva2.jpg'
riippuen kumpaa zoomaus tapaa käytät
Jonka jälkeen <BODY> osassa olevat kuvat näillä koodeilla.
<p><img id="image1" border="0" src="kuva1.jpg" style="width:300px;height:225px" /><p>
<p><img id="image2" border="0" src="kuva2.jpg" style="width:300px;height:225px" /><p>
<p><img id="image3" border="0" src="kuva3.jpg" style="width:300px;height:225px" /><p>
missä voit itse määrittää näkyvän kuvan koon.
alla esimerkit miten kuvat näkyvät.
Vaihto ehto kuva 1
<p><img id="image1" border="0" src="kuva1.jpg" style="width:300px;height:225px" /><p>
Vaihto ehto kuva 2
<p><img id="image2" border="0" src="kuva2.jpg" style="width:300px;height:225px" /><p>
Vaihto ehto kuva 3
<p><img id="image3" border="0" src="kuva3.jpg" style="width:300px;height:225px" /><p>
<img id="image1" src="kuva1.jpg" style="width:300px; height:200px" />
"image1"<-kohdassa valitset mitä zoomaus noista haluat käyttää
"kuva1.jpg"<-kohdassa valitset sen polun missä kuva sijaitsee
"width:300px; height:200px"<-kohdassa annat kuvalle sen koon minkä
kokosena se näkyy.