Hallihallo!
Ich bin nicht sonderlich bewandert in Sachen JavaScript und stehe nun schon seit einiger Zeit vor folgendem Problem:
Auf meiner Webseite sollen beim Klick auf Thumbnails die entsprechenden Originalbilder in jeweils passend großen Popups geöffnet werden. Da die Originalbilder aber alle unterschiedlich groß sind und auch verschiedene Seitenverhältnisse haben, wäre es schon, wenn das script zum Öffnen des Popups vorher auch selbstständig die Bildgröße ermitteln könnte, um die Popupgröße an diese anzupassen.
Soweit ich herausgefunden habe, lässt sich das über diesen Ansatz realisieren:
function oeffnen(datei) {
var bild = new Image();
bild.src = datei;
...und dann im window.open die Maße per bild.width und bild.height angeben.
Das funktioniert soweit auch, allerdings immer erst beim zweiten Klick auf einen Thumbnail. Beim ersten Klick wird das Bild in einem beliebig großen Fenster geöffnet - bild.width und bild.height sind zu diesem Zeitpunkt gleich Null.
Ich vermute zwar, der Fehler wird dadurch verursacht, dass die Bildgröße schon ermittelt wird, bevor das Bild überhaupt geladen wurde, habe allerdings keine Ahnung, wie man das umgeht. Kann mir hier vielleicht jemand helfen?
Viele Grüße,
Elisa
Hi, ich hab' vor kurzem etwas ähnliches programmiert und denke mal, daß es Dir helfen wird.
GetHeightWidthOnLoad
Erklärung: Du "mußt" einen onload-Handler schreiben, der nach dem Laden des Bildes automatisch aufgerufen wird. Erst zu diesem Zeitpunkt hast Du Höhe und Breite. Da das Setzen der "SRC" asynchron abläuft, also die Programmausführung direkt weiterläuft, ist Höhe und Breite "meistens" 0.Code:<html> <head> <title>Malleus' Image-Loading Test mit "onload"</title> <script language="JavaScript" type="text/javascript"> <!-- function doIt() { var newImage = new Image(); newImage.onload = function () { getHeightWidth( this ) }; newImage.src = "http://www.javascript-spielereien.de/miscs/movezoom/Gretel02.jpg"; getHeightWidth( newImage ); } function getHeightWidth( newImage ) { if (newImage.alreadyLoaded || newImage.width == 0) return true; breite = newImage.width; hoehe = newImage.height; newImage.alreadyLoaded = true; alert(breite + ":" + hoehe); document.getElementById( "myDiv" ).appendChild( newImage ); } //--> </script> </head> <body> <input type="button" value="Lade Bild mit dem Onload-Event" onclick="doIt()"/> <div id="myDiv"></div> </body> </html>
Das Onload feuert aber bei manchen Browers nicht immer (Cache). Aus diesem Grund rufe ich diese Funktion nochmal manuell auf und überprüfe, ob Höhe und Breite ungleich "0" sind. Wenn ja, setze ich ein Flag, das dann später von "richtigen" Onload-handler überprüft wird.
Okay?
Wenn nicht, einfach nachfragen
tschau
Frank
Hmm, also ich bin mir ziemlich sicher, dass ich sowas nicht hätte selber schreiben können...
Habe mein script jetzt jedenfalls entsprechend geändert und nun funktioniert alles bestens. Vielen Dank also!
Achja, und nebenbei bemerkt - coole Katze ;-)
Freut mich, daß es funktioniert hat und wie gesagt, wenn Dir etwas unklar ist, einfach nachfragen!
Tschau
Frank
Hallo,
ich würde hier gern noch einmal nachhaken:
Ich habe 3 Bildgalerien, die jeweils per open window angesteuert werden, allerdings läuft dann die Galerie im Fenster als Flashfilm (Slideshow).
Unter dem Movie habe ich einen Hyperlink auf die nächste Galerie gemacht, so dass der User nicht immer das Fenster schliessen und die nächste Galerie neu öffnen muss.
Jetzt legt aber der erste Befehl für open Window die Fenstergrösse fest und wenn man dann auf "next" klickt, bleibt diese so. Da es ein Movie ist variiert die Grösse ebenfalls, nur wie kann ich das in den "next"-link einbauen, so dass sich das bestehen Fenster automatisch vergrössert?
So wie oben für einzelne Bildgalerien mit jpg´s ?
Vielen Dank im voraus und Grüsse,
MadCat
Ein Problem ist eine Lösung im Arbeitskittel!
Aktive Benutzer in diesem Thema: 1 (Registrierte Benutzer: 0, Gäste: 1)
LinkBack URL
About LinkBacks
Zitieren