Popup an Fotogroesse anpassen

[molily]

Hallo,

ich habe in SelfHTML schon danach gesucht aber nur Sachen über "normale" Popups gefunden.

Dann nehme ich an, dass du http://home.t-online.de/home/dj5nu/js-popup.html schon gelesen hast...?

Ich möchte aber Fotos in Popup Fenstern zeigen, diese sollen sich genau an der Größe des Fotos anpassen, also so dass das Popup immer gleich groß ist wie das Foto. Wie mach ich das?
Geht mit JavaScript und viel Tricksen, denn vergiss nicht, das für alle Browser getrennt zu codieren.

Mit Verlaub, das ist Schwachsinn.

http://selfhtml.teamone.de/javascript/objekte/window.htm#open
Mit den "Flags" height und width im dritten Funktionsparameter  von window.open() lässt sich die Größe des zu öffnenden Fensters festlegen.
Ich würde mit PHP und getimagesize() arbeiten: http://www.php.net/manual/de/function.getimagesize.php
Den Aufruf des Popups könnte man mit PHP (oder Perl/Python/generell CGI) generieren, die Parameter der Bildgröße werden mit PHP ausgelesen und dann ausgegeben, um einen Link zu generieren. Beispielsweise:

<?php
function bildlink ($linktext, $bilddatei) {
 $rand=10;
 $bildgroesse=getimagesize($bilddatei);
 echo('<a href="'.$bilddatei.' onclick="popup('bildscript.php?'.$bilddatei.'','.$bildgroesse[0]+$rand.','.$bildgroesse[1]+$rand.'); return false">'.$linktext.'</a>');
}
?>

Aufruf:

<?php bildlink('Ralf und Simon trinken Malzbier', 'ralfundsimon.jpg'); ?>

Die JavaScript-Funktion:

<script type="text/javascript">
<![CDATA[
function popup (url, breite, hoehe) {
 var fenster=window.open(url, "fenster", "width="+breite+",height="+hoehe+",status=no,scrollbars=no,resizable=yes");
 fenster.focus();
}
]]>
</script>

Die Datei bildscript.php (nur body, oben bin ich von 10px Rand ausgegangen):

<?php
if (isset($HTTP_SERVER_VARS['QUERY_STRING']) && (!empty($HTTP_SERVER_VARS['QUERY_STRING']))) {
 $bilddatei=$HTTP_SERVER_VARS['QUERY_STRING'];
 $bildgroesse=getimagesize($bilddatei);
 echo('<div><a href="javascript:window.close();"><img src="'.$bilddatei.'" alt="(Alternativtext)" width="'.$bildgroesse[0].'" height="'.$bildgroesse[1].'" '.$bildgroesse[3].' /></a></img></div');
} else {
 echo('<p><strong>Fehler:</strong> Kein Bildname zum Anzeigen übermittelt!</p><p><a href="javascript:window.close()">Fenster schließen</a></p>');
}
?>

Alles ungetestet und auf die Schnelle geschrieben. Vielleicht ist mir etwas entfallen. Die Bildbeschreibung könnte man natürlich auch übermitteln. Besser aber man macht alles mit einer Datenbank, *SQL oder arraybasiert, wie man möchte und wie es passt.

Mathias
(Hilfe zur Selbsthilfe? ;))