Hi Rockford,
Die Bilder haben 800x533 Pixel.
Das sind ja ziemliche Teile ;)
Entweder ist das Fenster zu groß, oder ich taste mich langsam an die Größe ran
Wie Jörg Dir vorgeschlagen hat solltest Du das mit der JS-Funktion window.open lösen. Allerdings gibt es immer den Haken, dass unterschiedlich große Bilder in einer fixen Fenstergröße entweder abgeschnitten oder mit Rand angezeigt werden. Da gibt es aber die Möglichkeit, JS (dieses muss sowieso aktiviert sein, wenn Du die Bilder auf diese Art anzeigen willst) und einen Funken PHP einzusetzen. Erweitere dazu een JS-Code im Head der Hauptseite wie folgt:
var ns = (document.all)?false:true;
var browserVersion = parseFloat(navigator.appVersion );
PositionX = 100;
PositionY = 100;
defaultWidth = 420;
defaultHeight = 420;
if (parseInt(navigator.appVersion.charAt(0))>=4){
var isNN=(navigator.appName=="Netscape")?1:0;
var isIE=(navigator.appName.indexOf("Microsoft")!=-1)?1:0;
}
var optNN='scrollbars=no,width='+defaultWidth+',height='+defaultHeight+',left='+PositionX+',top='+PositionY;
var optIE='scrollbars=no,width=150,height=100,left='+PositionX+',top='+PositionY;
function popup(imageURL){
if (isNN){imgWin=window.open('picture.php?picname='+imageURL,'',optNN);}
if (isIE){imgWin=window.open('picture.php?picname='+imageURL,'',optIE);}
}
Speichere folgendes dann als 'picture.php' im selben Verzeichnis: (Name und VZ so, weil in der JS-Funktion überhalb so benannt - Du kannst natürlich die Datei an beiden Orten umbenennen, nur das .php ist wichtig.
<html>
<head>
<title>Bildergalerie</title>
<style type="text/css">
body { margin:0; padding:0; }
img { display:block; }
</style>
<script type="text/javascript">
var isNN,isIE;
if (parseInt(navigator.appVersion.charAt(0))>=4){
isNN=(navigator.appName=="Netscape")?1:0;
isIE=(navigator.appName.indexOf("Microsoft")!=-1)?1:0;
}
function reSizeToImage(){
if (isIE) {
window.resizeTo(100,100);
width=100-(document.body.clientWidth-document.images[0].width);
height=100-(document.body.clientHeight-document.images[0].height);
window.resizeTo(width,height);
}
if (isNN) {
window.innerWidth=document.images["pic0"].width;
window.innerHeight=document.images["pic0"].height;
}
}
</script>
</head>
<body bgcolor=000000 scroll="no" onload="reSizeToImage();self.focus()" onblur="self.close()">
<img id="pic0" name="pic0" src='<?=$_GET["picname"]?>.jpg'>
</body>
</html>
Und versieh danach jeden Link, welcher ein Bild öffnen soll, beispielsweise so:
<a href="javascript:popup('../bilder/bild1');"><img.... /></a>
(Pfad natürlich korrigieren, die Standard-Erweiterung ist .jpg, jene würde ich aus Sicherheitsgründen in der PHP-Datei hardcodiert lassen, und nicht mit übergeben)
Der Link wird Dir dann ein Fenster öffnen, welches vorerst eine Standardgröße von 100*100 hat, nachdem das Bild geladen ist, vergrößert/verkleinert sich das Fenster auf die Bildgröße. Wird auf die Seite zurückgeklickt, schließt sich das Fenster automatisch wieder.
Auf der von dir angegebenen Seite übergibt die Website die Größe fixiert. Die Bilder haben dann ganz einfach genau dieselbe Größe.
Dann wird aber das Bild skaliert.
Das kann fast Nur geschehen, wenn Du das Bild selbst verzerrst. Das solltest Du nicht machen, sprich bei einer variablen Bildgröße solltest Du width/height im img-tag / css nicht angeben.