plaatjes bekijken

uitzoomen inzoomen rechts links onder boven
Snelheid : (mouse-over = 1x - muis ingedrukt = 10x)

Geweldig script waarmee je op een mooie manier je foto's op je site kunt weergeven.. Door op de thumbnails te klikken laad het plaatje erboven in, vervolgens kun je deze op allerlei manieren bekijken


	Plak dit tussen de <head> tags

<script type="text/javascript">  BeeldLijst=new Array() BeeldLijst[BeeldLijst.length]="foto1.jpg" BeeldLijst[BeeldLijst.length]="foto2.jpg" BeeldLijst[BeeldLijst.length]="foto3.jpg" BeeldLijst[BeeldLijst.length]="foto4.jpg" BeeldLijst[BeeldLijst.length]="foto5.jpg" snelheid1=1 snelheid2=10 minBeeldafmeting=1 // 0 = tot venstergrootte, 1 = tot afbeelding grootte timer="" actief=snelheid1 pic=new Array() for(i=0;i<BeeldLijst.length;i++){ pic[i]=new Image() pic[i].src=BeeldLijst[i]} function init(z){ if(!z){z=0} containerBreedte=parseInt(document.getElementById("container").style.width) containerHoogte=parseInt(document.getElementById("container").style.height) obj=document.getElementById("afbeelding") obj.src=pic[z].src beeldBreedte=pic[z].width beeldHoogte=pic[z].height obj.style.left=0 obj.style.top=0 pos_x=0 pos_y=0 nu_links=0 nu_boven=0 obj.style.width=beeldBreedte obj.style.height=beeldHoogte} function horizontaal(n){ nu_links=parseInt(obj.style.left) if(n==0){nu_links-=actief} if(n==1){nu_links+=actief} if(nu_links> -actief){ nu_links=0 stop()} if(nu_links < containerBreedte - obj.offsetWidth+actief){ nu_links = containerBreedte - obj.offsetWidth stop()} obj.style.left=nu_links + 'px' timer=setTimeout("horizontaal("+n+")",50)} function verticaal(n){ nu_boven=parseInt(obj.style.top) if(n==0){nu_boven-=actief} if(n==1){nu_boven+=actief} if(nu_boven> -actief){ nu_boven=0 stop()} if(nu_boven < containerHoogte - obj.offsetHeight+actief){ nu_boven = containerHoogte - obj.offsetHeight stop()} obj.style.top=nu_boven + 'px' timer=setTimeout("verticaal("+n+")",50)} function stop(){ clearTimeout(timer)} function zoom(n){ nu_links=parseInt(obj.style.left) nu_boven=parseInt(obj.style.top) nu_breed=obj.offsetWidth nu_hoog=obj.offsetHeight if(n==0){ nu_breed-=actief nu_hoog-=actief} if(n==1){ nu_breed+=actief nu_hoog+=actief} obj.style.width=nu_breed+'px' obj.style.height=nu_hoog+'px' timer=setTimeout("zoom("+n+")",50) if(minBeeldafmeting==0){ if(nu_breed<beeldBreedte){obj.style.width=beeldBreedte} if(nu_hoog<beeldHoogte){obj.style.height=beeldHoogte} if(nu_links>0){ nu_links=0 obj.style.left=nu_links} if(nu_boven>0){ nu_boven=0 obj.style.top=nu_boven} if(nu_links<-obj.offsetWidth+containerBreedte){ nu_links=-obj.offsetWidth+containerBreedte obj.style.left=nu_links} if(nu_boven<-obj.offsetHeight+containerHoogte){ nu_boven=-obj.offsetHeight+containerHoogte obj.style.top=nu_boven}} if(minBeeldafmeting==1){ if(obj.offsetWidth<containerBreedte){ obj.style.width=containerBreedte obj.style.left=0} if(obj.offsetHeight<containerHoogte){ obj.style.height=containerHoogte obj.style.top=0} if(nu_links<0&&obj.offsetWidth<containerBreedte+ -nu_links){ nu_links+=actief obj.style.left=nu_links} if(nu_boven<0&&obj.offsetHeight<containerHoogte+ -nu_boven){ nu_boven+=actief obj.style.top=nu_boven}}} function snelheid(s){ if(s==1){actief=snelheid1} if(s==2){actief=snelheid2} } </script>


	Plak dit tussen de <body> tags

<center>   <div id="container" style="width:200px;height:120px;overflow:hidden;"> <IMG id="afbeelding" src="" style="position:relative;left:0px;top:0px;display:block"> </div> <br> <a href="#" onmouseover="zoom(0)" onmouseout="stop()" onmousedown="snelheid(2)" onmouseup="snelheid(1)"> <font size="2" face="Verdana"> uitzoomen</font></a> <font size="2" face="Verdana"> </font> <a href="#" onmouseover="zoom(1)" onmouseout="stop()" onmousedown="snelheid(2)" onmouseup="snelheid(1)"> <font size="2" face="Verdana"> inzoomen</font></a> <font size="2" face="Verdana"> </font> <a href="#" onmouseover="horizontaal(0)" onmouseout="stop()" onmousedown="snelheid(2)" onmouseup="snelheid(1)"> <font size="2" face="Verdana"> rechts</font></a> <font size="2" face="Verdana"> </font> <a href="#" onmouseover="horizontaal(1)" onmouseout="stop()" onmousedown="snelheid(2)" onmouseup="snelheid(1)"> <font size="2" face="Verdana"> links</font></a> <font size="2" face="Verdana"> </font> <a href="#" onmouseover="verticaal(0)" onmouseout="stop()" onmousedown="snelheid(2)" onmouseup="snelheid(1)"> <font size="2" face="Verdana"> onder</font></a> <font size="2" face="Verdana"> </font> <a href="#" onmouseover="verticaal(1)" onmouseout="stop()" onmousedown="snelheid(2)" onmouseup="snelheid(1)"> <font size="2" face="Verdana"> boven</font></a> <font size="2" face="Verdana"> <br> Snelheid : (mouse-over = 1x - muis ingedrukt = 10x) <br></font><br> <a href="#" onclick="init(0)"> <img src="foto1.jpg" width="60" height="40" border="0" alt=""> </a> <a href="#" onclick="init(1)"> <img src="foto2.jpg" width="60" height="40" border="0" alt=""> </a> <a href="#" onclick="init(2)"> <img src="foto3.jpg" width="60" height="40" border="0" alt=""> </a> <a href="#" onclick="init(3)"> <img src="foto4.jpg" width="60" height="40" border="0" alt=""> </a> <a href="#" onclick="init(4)"> <img src="foto5.jpg" width="60" height="40" border="0" alt=""> </a> </center>

© www.leejoo.nl