Hallo Forum,
ich habe auf meiner Homepage eine kleine Galerie installiert und ein JS-Script aus dem Netz ein wenig abgewandelt.
Leider habe ich das Problem, dass sich die Bilder nicht in der richtigen Größe öffnen. Erst wenn man das Bild einmal geschlossen hat und es erneut öffnen möchte, öffnet es in der richtigen Größe.
Es geht immer erst beim zweiten Aufruf.
Im Einzelnen:
Bildergalerie auf Http-Site mit kleinen jpg. Beim Klick auf das Mini-jpg wird in externer JS ausgelagerte Funktion angesprochen, die ein Fenster mit dem großen JPG öffnet. Die Fenstergörße soll sich nach der Auflösung des Bildes richten, plus ein paar Zentimeter für Über- und Unterschriften.
1. Hier der Aufruf aus dem HTML (verkürzt dargestellt):
<html>
<head>
<script language="JavaScript" src="/js/bilderPopUp.js" type="text/javascript"></script>
</head>
<body>
<a href="javascript: popUpImg('fotos/Ferienwohnung/Essbereich Kueche_1.jpg','Bilder Ferienwohnung', 'Ess- und Küchenbereich', 'Zum Schließen des Fensters bitte auf das Bild klicken')"><img src="fotos/Ferienwohnung/Piktogramme/Essbereich Kueche_1.jpg" alt="Ess- und Küchenbereich ::: Zum Vergrößern bitte klicken" border="0" longdesc="fotos/Ferienwohnung/Essbereich Kueche_1.jpg"></a>
</body>
</html>
2. Hier die JS
function popUpImg(img, Titelschrift, Ueberschrift, Unterschrift) {
myImg = new Image();
myImg.src = img;
var width = myImg.width;
var height = eval(myImg.height+100);
var breite = width;
var hoehe = height;
var links,oben;
links = eval((screen.width - breite)/2);
oben = eval((screen.height - hoehe)/2);
imgWin = window.open('', 'Titelschrift', 'left=' + links + ', top=' + oben + ', width=' + width + ', height=' + height);
with (imgWin.document) {
open();
write('<HTML>');
write(' <HEAD>');
write(' <title>' + Titelschrift + ' </title>');
write(' </HEAD>');
write(' <BODY style="margin: 0px; font-family: Arial,sans-serif; text-align:center; font-size:12px; line-height:20px;" onLoad="self.focus();">');
write(' <p> ' + Ueberschrift + ' </p>');
write(' <a href="" onClick="JavaScript:self.close()">')
write(' <img src="' + img + '" alt="popUpImage" title="popUpImage" border="0"></a>');
write(' <p> ' + Unterschrift + ' </p>');
write(' </BODY>');
write('</HTML>');
close();
}
}
Man hat mir mitgeteilt, was auch logisch und verständlich ist, dass ich erst abwarten müsste, bis das Bild fertig geladen ist, und erst dann auf seine Maße zugreifen könnte.
Das soll gehen, in dem ich den erzeugten Bildobjekten einen onload-Handler dynamisch anhänge.
Ich hab mich jetzt mal schlau gemacht aber als völliger JS - Neuling weiß ich überhaupt nicht, wo und wie ich den onLoad einbauen soll. Im JS oder im HTML? Wie soll das gehen?
Vielleicht kann mir ja einer eine verständliche und kurze Hilfe geben.
Herzlichen Dank
Gruß Joerg