Da ich auf meiner neuen HP viele Bilder unterschiedlicher Größe haben werden, wollt ich fragen ob sich das realisieren kann, das die größe vom bild ausgelesen wird und dann in einem neuen fenster geöffnet wird mit der größe des bildes. bei dem neuen geöffnet fenster soll dann aber auch nicht der standarttypische weiße rand (IE) da sein + kein statusleiste. schön wär noch wenn der dateiname des bild dann oben im title-tag stehen könnte + wenn man auf das bild klickt das ganze wieder schließt bzw. wenn man ein anderes bild öffnet das im gleichen fenster öffnet und dann auch wieder automatisch auf die größe des neuen bildes angepasst wird. wie gesagt das ganze ohne für jedes bild eine extra html zu schreiben bzw. script. Ist das möglich mit JS, so das es im IE und Mozilla funktioniert?
Script das Breite von Image ausliest und in einem neuen fenster öffnet
- Themenstarter DerbyStar
- Beginndatum
Tribalman
Erfahrenes Mitglied
OK
Ich hab genau das gleiche Problem. Hab mich heute den ganzen Tag
damit beschäftigt und hab jetzt einen Lösungsansatz. Leider funktioniert
es noch nicht ganz
Hier der Code
Auf der Seite popup_test.html ist ein Thumbnail namens red-small.gif. Dieses
liegt im Ordner bilder. Dort liegt auch das eigentliche Bild red.gif. Über ein onClick
wird die Funktion get_img aufgerufen und die Quelle des Thumbs übergeben. Der
Zusatz -small wird entfernt (später sollen mal viele Bilder mit derselben Funktion
arbeiten). Dann wird die Breite und Höhe von red.gif ermittelt.
Jetzt wird ein leeres Popup mit der entsprechenden Höhe und Breite aufgerufen.
Dort soll über javascript das Bild reingeschrieben werden – inclusive body etc.
damit das Bild ohne Ränder dargestellt wird.
Leider klappt es noch nicht ganz. Das Problem liegt offenbar beim ermitteln der
Größe und Breite des großen Bildes. Das Script funktioniert erst beim zweiten
Aufruf (eventuell über F5 die Seite reloaden) weil das große Bilod dann schonmal
geladen wurde.
Hier ist ein Link zu meiner Testseite »klick
Was muss ich ändern? Könnt ihr helfen?
Stefan
Ach ja, noch was: Wenn das Popup geladen ist, wird trotzdem die ganze Zeit
die Sanduhr angezeigt und in der Statuszeile steht "warten auf www.kalscheid.de..."
Ich hab genau das gleiche Problem. Hab mich heute den ganzen Tag
damit beschäftigt und hab jetzt einen Lösungsansatz. Leider funktioniert
es noch nicht ganz
Hier der Code
Code:
<html>
<head>
<title>test</title>
<link rel="stylesheet" href="test_style.css" type="text/css">
<script type="text/javascript">
function get_img(quelle) {
alert(quelle);
quelle = quelle.replace(/-small./, ".");
var bild = new Image(); bild.src = quelle;
var width = bild.width;
var height = bild.height;
alert(width +" " +height);
fenster(quelle,'bilder',width,height)
}
function fenster(url,titel,breite,hoehe) {
var x = window.screenX;
var y = window.screenY;
var oben = y + top.outerHeight/2 - hoehe/2 + 35;
var links = x + window.outerWidth/2 - breite/2;
F1 = window.open("blank.html", titel, "width=" + breite + ", height=" + hoehe + ", top=" + oben + ", left=" + links + ", toolbar=0, scrollbars=0, location=0");
F1.document.writeln('<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">');
F1.document.writeln('<html><head><title>Blank<\/title>');
F1.document.writeln('<link rel="stylesheet" href="test_style.css" type="text/css">');
F1.document.writeln('<\/head>');
F1.document.writeln('<body><img src="' + url + '">');
F1.document.writeln('<\/body><\/html>');
}
</script>
</head>
<body>
<img onclick="get_img(this.src);" src="bilder/rot-small.gif" width="100" height="100" alt="" border="0">
</body>
</html>Auf der Seite popup_test.html ist ein Thumbnail namens red-small.gif. Dieses
liegt im Ordner bilder. Dort liegt auch das eigentliche Bild red.gif. Über ein onClick
wird die Funktion get_img aufgerufen und die Quelle des Thumbs übergeben. Der
Zusatz -small wird entfernt (später sollen mal viele Bilder mit derselben Funktion
arbeiten). Dann wird die Breite und Höhe von red.gif ermittelt.
Jetzt wird ein leeres Popup mit der entsprechenden Höhe und Breite aufgerufen.
Dort soll über javascript das Bild reingeschrieben werden – inclusive body etc.
damit das Bild ohne Ränder dargestellt wird.
Leider klappt es noch nicht ganz. Das Problem liegt offenbar beim ermitteln der
Größe und Breite des großen Bildes. Das Script funktioniert erst beim zweiten
Aufruf (eventuell über F5 die Seite reloaden) weil das große Bilod dann schonmal
geladen wurde.
Hier ist ein Link zu meiner Testseite »klick
Was muss ich ändern? Könnt ihr helfen?
Stefan
Ach ja, noch was: Wenn das Popup geladen ist, wird trotzdem die ganze Zeit
die Sanduhr angezeigt und in der Statuszeile steht "warten auf www.kalscheid.de..."
Zuletzt bearbeitet:
con-f-use
Erfahrenes Mitglied
Ohne den Post meines Vorgängers gelesen zu haben kuckt ihr hier: http://confus.co.funpic.de/_data/tut/ der allerletzte Link auf der Seite...
Zuletzt bearbeitet:
con-f-use
Erfahrenes Mitglied
Ach verdammt, ich hasse funpic, die spielen immer mal wieder verrückt und ändern alle zwei Tage die Regeln. Wenn du die adresse direkt in die Leiste vom Browser eingibst kommst du auf die Seite. Da sind auch noch andere nütliche Scripts von mir.
Egal, hier der Code nochmal:
Was verstehst du denn nicht?
P.S.
Das Forum mag mich auch nicht, das wirft immer meine ganze Einrückung im Code über den Haufen. Sorry dafür.
Egal, hier der Code nochmal:
HTML:
<script type="text/javascript"><!--
//coded by con-f-use@gmx.net - be fair and do not remove this
var picCnt=0, pic=new Array();
function popImage(strURL) {
pic[picCnt] = new Image();
pic[picCnt].src = strURL;
setTimeout('sizePopup('+ (picCnt++) +')', 20);
return false;
}
function sizePopup(intPic) {
if (!!pic[intPic].width) {
var win = window.open('','','height='+pic[intPic].height+', width='+pic[intPic].width);
with (win.document) {
open();
write(
'<html><head><title>POPUP</title></head>'+
'<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0"><div onclick="window.close()">'+
'<img src="'+ pic[intPic].src +'" width="'+ pic[intPic].width +'" height="'+ pic[intPic].height +'" />'+
'</div></body></html>'
);
close();
}
} else
setTimeout('sizePopup('+ intPic +')',20);
}
//--></script>
<a href="bild.jpg" onclick="return popImage(this.href)">PopUp öffnen</a>P.S.
Das Forum mag mich auch nicht, das wirft immer meine ganze Einrückung im Code über den Haufen. Sorry dafür.
Zuletzt bearbeitet:
Tribalman
Erfahrenes Mitglied
Na, ich glaub ich hab´s geschnallt. Allerdings frage ich mich,
warum man das Popup mit setTimeout aufruft (aufrufen muss?).
Und soviel ich auch gucke, ich kann bei SelfHTML nirgends eine
Erklärung für das doppelte Ausrufezeichen !! finden. (Ja, ich
bin Anfänger) Ich versteh das mal so: Wenn die Bildbreite nicht
abgerufen werden kann, wird die Funktion einfach nochmal
aufgerufen. Nur, warum kann die Breite dann irgendwann ermittelt
werden?
Ich werde das Script morgen ausprobieren und mich bei Problemen
nochmal melden.
Danke,
Stefan
warum man das Popup mit setTimeout aufruft (aufrufen muss?).
Und soviel ich auch gucke, ich kann bei SelfHTML nirgends eine
Erklärung für das doppelte Ausrufezeichen !! finden. (Ja, ich
bin Anfänger) Ich versteh das mal so: Wenn die Bildbreite nicht
abgerufen werden kann, wird die Funktion einfach nochmal
aufgerufen. Nur, warum kann die Breite dann irgendwann ermittelt
werden?
Ich werde das Script morgen ausprobieren und mich bei Problemen
nochmal melden.
Danke,
Stefan
Zuletzt bearbeitet:
con-f-use
Erfahrenes Mitglied
Es dauert ja ein wenig, bis das Bild geladen ist - gerade bei größeren Bildern. Javascript macht aber einfach weiter, so dass das PopUp schon geöffnet werden würde, bevor eine Bildbreite existiert und das wäre dämlich. Darum geschieht solange nichts, bis eine Bildbreite existiert. Das doppelte Ausrufezeichen bewirkt nur, dass aus dem Int der Bildbreite ein bool wird, damit es in der if-Abfrage nicht zu dummen fehler kommt.
