windows high Fehler

[Ch]

Hallo,
ich bin gerade dabei mir eine Popupansicht für Bilder zu bauen. Nur ist es so das beim ersten Klick, das Popup unten am Rand des Browers ist und beim zweiten Klick ist es richtig. Ich finde den Fehler leider nicht, aber vielleicht kann mir jemand helfen.

$("a[target=_self]").live("click", function(){            
                var POPUP = $('<div id="POPUP"><p><img src=""/><em></em></p></div>');
                var imgSrc = $(this).attr("href");
                var imgAlt = $(this).children("img").attr("alt");
                $(POPUP).prependTo("body")
                        .children("p")
                        .children("img")
                        .attr("src", imgSrc)
                        .next("em")
                        .html(imgAlt);               
                // wenn ich hier ein alert ausgebe, dann geht es komischerweise
                var WINDOWWidth = $("#CENTER").width();
                var WINDOWHeight = $(window).height();
                var POPUPHeight = $("#POPUP").children("p").height();                
                var NEWHeight = (WINDOWHeight - POPUPHeight) / 2;
                $("#POPUP").css({"top":NEWHeight,"width":WINDOWWidth});

                $("#POPUP p").live('click', function(){
                    $(this).parent("div").remove();
                });
                return false;
        });

 

[CPoly]

Das Bild ist an der Stelle, wo du height() aufrufst, noch nicht geladen, deshalb bekommst du falsche Werte. Wenn du das alert einbaust, verschaffst du dem Bild Zeit zu laden. Ich nehme an du arbeitest lokal, deshalb fällt es dem Auge nicht auf.

Also häng dem img-Element ein "load" Event-Handler an und steck deinen Code dort hinein.

Edit: Funktioniert meiner Erinnerung nach nicht im IE, dort musst du glaube ich die "complete" Eigenschaft eines Image-Objektes pollen.

http://api.jquery.com/load-event/

Caveats of the load event when used with images

A common challenge developers attempt to solve using the .load() shortcut is to execute a function when an image (or collection of images) have completely loaded. There are several known caveats with this that should be noted. These are:

It doesn't work consistently nor reliably cross-browser
It doesn't fire correctly in WebKit if the image src is set to the same src as before
It doesn't correctly bubble up the DOM tree
Can cease to fire for images that already live in the browser's cache

 

[Ch]

Danke das habe ich gesucht, leider gibt es für die prependTo Methode keine Callback Möglichkeit. Dann könnte man das ganz einfach lösen.

 

[CPoly]

Ich hab das mal skizziert, musst du dann anpassen, macht so denke ich keine richtigen Sinn:

$("a[target=_self]").live("click", function(){
        var POPUP = $('<div id="POPUP"><p><img src=""/><em></em></p></div>');
        var imgSrc = $(this).attr("href");
        var imgAlt = $(this).children("img").attr("alt");

        var img = new Image();
        
        img.onload = function() {

                $(POPUP).prependTo("body")
                        .children("p")
                        .children("img")
                        .attr("src", imgSrc)
                        .next("em")
                        .html(imgAlt);               
                // wenn ich hier ein alert ausgebe, dann geht es komischerweise
                var WINDOWWidth = $("#CENTER").width();
                var WINDOWHeight = $(window).height();
                var POPUPHeight = $("#POPUP").children("p").height();                
                var NEWHeight = (WINDOWHeight - POPUPHeight) / 2;
                $("#POPUP").css({"top":NEWHeight,"width":WINDOWWidth});
 
                $("#POPUP p").live('click', function(){
                    $(this).parent("div").remove();
                });

        }

        img.src = imgSrc;

        return false;
});

Du müsstest das dann etwas umbauen, dass du zuerst eine Ladegrafik anzeigst und wenn das Bild fertig ist, den Kasten richtig skalierst.

 

[Ch]

Super danke, es funktioniert so. Der Loader ist im <p> über css schon eingebunden.

Danke

habe es jetzt so gemacht....

$("a[target=_self]").live("click", function(){
                var POPUP = $('<div id="POPUP"><p><img src=""/><em></em></p></div>');
                var imgSrc = $(this).attr("href");
                var imgAlt = $(this).children("img").attr("alt");
                var img = new Image();
                $(POPUP).prependTo("body");
                img.onload = function() {
                        $(POPUP).remove();
                        $(POPUP).prependTo("body")
                                .children("p")
                                .children("img")
                                .attr("src", imgSrc)
                                .next("em")
                                .html(imgAlt);                      
                        var WINDOWWidth = $("#CENTER").width();
                        var WINDOWHeight = $(window).height();
                        var POPUPHeight = $("#POPUP").children("p").height();
                        var NEWHeight = (WINDOWHeight - POPUPHeight) / 2;
                        
                        $("#POPUP").css({"top":NEWHeight,"width":WINDOWWidth});
                        $("#POPUP p").live('click', function(){
                            $(this).parent("div").remove();
                        });
                }
                img.src = imgSrc;
                return false;
        });