Størrelse af billede
Hej EksperterJeg har et slideshow som aktiveres ved:
<a href="#" onclick="openpopupboulder(0)">
Og funktionen openpopupboulder ser således ud:
function openpopupboulder(nr){
window.open("slideshowboulder.htm?vis="+nr,"",",resizable");
}
Og slideshowboulder.htm ser således ud:
<html>
<head>
<link rel=StyleSheet href="../../styles/style.css" type="text/css">
<title>Slideshow</title>
<style type="text/css">
body{ padding : 0px;
margin : 10px;
}
span.caps{ color : black;
text-align : center;
}
.border{ border : solid 2px black;
text-align : left;
}
.bordercaption{ background-color : #88a3be;
border-bottom : solid 2px black;
border-left : solid 2px black;
text-align : left;
padding : 3px;
padding-left : 10px;
}
.borderright{ background-color : #88a3be;
border-bottom : solid 2px black;
border-right : solid 2px black;
text-align : right;
padding : 3px;
}
A:link IMG { border-color: black;
border-width: 0px;
}
A:visited IMG { border-color: black;
border-width: 0px;
}
</style>
<script language="javascript" type="text/javascript">
NewImg = new Array (
"../../images/bouldering/bleau2004h1.jpg",
"../../images/bouldering/bleau2003h1.jpg",
"../../images/bouldering/bleau2003h2.jpg",
"../../images/bouldering/bleau2003h3.jpg",
"../../images/bouldering/bleau2004w1.jpg",
"../../images/bouldering/bleau2003w1.jpg",
"../../images/bouldering/ironman.jpg"
);
NewCap = new Array (
""Le faux baquet" (7a) - Bleau",
""Hale Bob" (7C) - Bleau",
""L'impasse du hassard" (7A) - Bleau",
""Le jeu du toit" (7B) - Bleau",
""Crazy horse" (7B) - Bleau",
"Stenene i Bleau kan have alverdens former - denne er kendt som "elefanten"...",
"Søren på "Ironman traverse" (6C) i Buttermilks under vores roadtrip i 2002"
);
var ImgNum = 0;
function getInitPic(){
if(location.search){
var picno = location.search.split('vis=')[1];
if(!picno.match(/^\d+$/))return;
ImgNum = +picno;
document.images['slideshowboulder'].src = NewImg[ImgNum];
document.getElementById('caption').innerHTML = NewCap[ImgNum];
resizePic(ImgNum);
}
}
function resizePic(ImgNum){
// SCREENSIZE:
screenheight = screen.height;
screenwidth = screen.width;
// PICTURESIZE:
pic = new Image();
pic.src = NewImg[ImgNum];
var picheight = pic.height;
var picwidth = pic.width;
var air = 0.87;
document.write(picheight+" "+picwidth)
var faktor = screenheight/picheight;
var zheight = Math.round(air*faktor*picheight);
var zwidth = Math.round(air*faktor*picwidth);
document.images['slideshowboulder'].height = zheight-50;
document.images['slideshowboulder'].width = zwidth-50;
self.resizeTo(zwidth-15,zheight+50);
self.moveTo(screenwidth-zwidth-15,10);
}
var loopLength = Math.min(NewImg.length,NewCap.length);
// sørger for at billederne og captions vises i ring
function chgImg(direction) {
if (document.images) {
ImgNum = (ImgNum + direction + loopLength)%loopLength;
document.images['slideshowboulder'].src = NewImg[ImgNum];
document.getElementById('caption').innerHTML = NewCap[ImgNum];
resizePic(ImgNum);
}
}
</script>
</head>
<body bgcolor="black" onload="getInitPic()">
<center>
<table cellspacing="0" cellpadding="0" width="150" align="right">
<tr>
<td colspan=2 class="border">
<img name="slideshowboulder" src="" alt=""><br>
</td>
</tr>
<tr>
<td class="bordercaption"><span class="caps" id="caption"></span></td>
<td class="borderright" width="40%"><a href="java script:chgImg(-1)">
<img src="../../images/bg/arrowleft.gif" width="31" height="31" alt=""></a>
<a href="java script:window.close()">
<img src="../../images/bg/luk.gif" width="60" height="26" alt=""></a>
<a href="java script:chgImg(1)">
<img src="../../images/bg/arrowright.gif" width="31" height="31" alt=""></a>
</td>
</tr>
</table>
</center>
</body>
</html>
Mit problem er at billederne ikke vil resizes rigtigt, og jeg tror det er aflæsningen af billedernes størrelse der glipper, altså denne del:
// PICTURESIZE:
pic = new Image();
pic.src = NewImg[ImgNum];
var picheight = pic.height;
var picwidth = pic.width;
