Jojoxx.net

 

 

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



Bildvisare

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 { height:16px; }
</style>
<table class="viewer_main">
<tr>
<td style="width:400px;height:400px;vertical-align:middle;text-align:center;" class="viewer_win"><div style="width:400px;height:400px;overflow:auto;"><img src="" id="viewer_img" style="display:none;border:dotted gray 1px;"></div></td>
<td style="width:200px;height:400px;vertical-align:top;"><form name="viewer_form"><div id="viewer_info"></div><select name="files" size="10" style="border:solid black 1px; width:150px;" onchange="viewer.load(this[this.selectedIndex].value);"></select></form></td>
</tr>
</table>
<script type="text/javascript">
/* Detta script finns att hämta på http://www.jojoxx.net och 
   får användas fritt i icke kommersiellt syfte så länge som
   dessa rader står kvar. Info: http://www.jojoxx.net/?legal
*/ 

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;
viewer.zoomlist='<option value="">Anpassa</option>';
for(var n in [0.25,0.5,1,2,4,8]){ viewer.zoomlist+='<option value="'+[0.25,0.5,1,2,4,8][n]+'">'+([0.25,0.5,1,2,4,8][n]*100)+' %</option>'; }
viewer.zoomlist="<select size=\"1\" onchange=\"viewer.zoomTo(this[this.selectedIndex].value)\">"+viewer.zoomlist+"</select>";
viewer.formobj=document.forms["viewer_form"];
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);
	document.getElementById('viewer_info').innerHTML="<table style=\"font-size:13px;\"><tr><td><strong>Filnamn</strong></td><td><a href=\""+viewer.loader.src+"\">"+viewer.filename(viewer.loader.src)+"</a></td></tr><tr><td><strong>Format</strong></td><td>"+viewer.picWidth+"×"+viewer.picHeight+" px</td></tr><tr><td><strong>Zoom</strong></td><td>"+viewer.zoomlist+"</td></tr><tr><td><strong>Bildspel</strong></td><td><input type=\"checkbox\" onclick=\"viewer.slideshow(this.checked);\" "+((viewer.timer)?"checked":"")+"></td></tr></table>"
	viewer.obj.style.display='inline';
}
viewer.load=function(str){
	viewer.obj.style.display='none'; document.getElementById('viewer_info').innerHTML=''; 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.formobj.files.selectedIndex=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]);
for(var n in images){ viewer.formobj.files[viewer.formobj.files.length]=new Option(viewer.filename(images[n]),images[n]); }
viewer.formobj.files.selectedIndex=0;
</script>

Kommentar

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

,