Jojoxx.net

 

 

AnvändareAnvändare
Besökare just nu: 103
SnabblänkarSnabblänkar
JavaScript-arkivet
Perl
FAQ
Sök på Jojoxx.netSök på Jojoxx.net



Bildvisare 2

Exempel

Kod


<style type="text/css">
.viewer_main { border: solid black 1px; background-color: rgb(230,240,255); font-family: Arial; }
.viewer_win { background-color:rgb(220,220,220); border: solid black 1px; }
.viewer_button { width:18px; padding:3px; margin:2px; border:solid black 1px; background-color:white; text-align:center; font-size:12px; font-weight:bold; color:gray; cursor:pointer; }
</style>
<table class="viewer_main">
<tr>
<td style="width:400px;height:400px;vertical-align:middle;text-align:center;" class="viewer_win"><div style="overflow:auto;"><img src="" id="viewer_img" style="display:none;border:dotted gray 1px;"></div></td>
<td style="width:30px;height:400px;vertical-align:top;"><div id="viewer_info" style="height:400px;text-align:center;overflow:auto;"></div></td>
</tr>
</table>
<script type="text/javascript">
/* Detta script finns att hämta på http://www.jojoxx.net och 
   får användas fritt så länge som dessa rader står kvar. */ 

var images=[
"/images/testbild101.jpg",
"/images/testbild102.jpg",
"/images/testbild103.jpg",
"/images/testbild001.jpg",
"/images/testbild002.jpg",
"/images/testbild003.jpg"
];

// Ändra inte rader nedan.
var viewer={ width:400, height:400, slideshowdelay:2000 };
viewer.obj=document.getElementById('viewer_img');
viewer.picnr=0; viewer.picWidth=viewer.picHeight=0;
for(var n in images){
	document.getElementById('viewer_info').innerHTML+="<div class=\"viewer_button\" style=\"\" onclick=\"if(viewer.activebutton){ viewer.activebutton.style.color=''; } viewer.activebutton=this; this.style.color='red'; viewer.load('"+images[n]+"');\">"+n+"</div>";
}
viewer.loader=new Image();
viewer.loader.onload=function(){
	viewer.obj.src=viewer.loader.src;
	viewer.picWidth=viewer.loader.width;
	viewer.picHeight=viewer.loader.height;
	if(viewer.picWidth>viewer.width||viewer.picHeight>viewer.height){
		viewer.zoomFactor=Math.min((viewer.width-2)/viewer.picWidth,(viewer.height-2)/viewer.picHeight);
	} else { viewer.zoomFactor=1; }
	viewer.obj.width=Math.floor(viewer.picWidth*viewer.zoomFactor);
	viewer.obj.height=Math.floor(viewer.picHeight*viewer.zoomFactor);
	viewer.obj.style.display='inline';
}
viewer.load=function(str){
	viewer.obj.style.display='none'; viewer.loader.src=str;
}
viewer.zoomTo=function(z){
	z=(z)?parseFloat(z):viewer.zoomFactor;
	viewer.obj.width=Math.floor(viewer.picWidth*z);
	viewer.obj.height=Math.floor(viewer.picHeight*z);
}
viewer.slideshow=function(sw){
	if(sw){
		viewer.picnr=(viewer.picnr<images.length-1)?viewer.picnr+1:0; viewer.load(images[viewer.picnr]);
		viewer.timer=setTimeout("viewer.slideshow(true);",viewer.slideshowdelay);
	} else { if(viewer.timer){ clearTimeout(viewer.timer); viewer.timer=null; } }
}
viewer.filename=function(str){ return str.replace(/\\/g,"/").substring(str.replace(/\\/g,"/").lastIndexOf("/")+1); }
viewer.load(images[viewer.picnr]);
</script>

Kommentar

Ett enkelt bildvisningsscript. I arrayen images lägger du in sökvägen till dina bilder.

,