jQuery Lightbox Overlay

Brainweaver

New member
Hallo,

ich möchte ein eigenes Lightbox-Script bauen, was nicht ganz klappt.

Das Overlay funktioniert, das Href des IMG wird übergeben und in der zentrierten Overlay Box wird ein IMG generiert, das auch noch (von einem Plugin) vorgeladen wird, damit jQuery widerum die Größe etc. auslesen kann.

Allerdings ist irgendwo der Wurm drin und wenn man nochmals auf ein Bild klickt, so wird die Box nicht mehr richtig zentriert.

Hier ist meine lightbox.js:
Code:
$.fn.lightBox = function() {
    
    $(this).click(function(){
        $("#overlay_box").addClass("loadingPic");
        var windowWidth = $(window).width();
        var windowHeight = $(window).height();
        var boxHeight = $("#overlay_box").height()/2;
        var boxWidth = $("#overlay_box").width()/2;

        var imgSrc = $(this).attr("href");
        $("#overlay_box").empty().html("<img src='"+imgSrc+"' />").css({
            "left":windowWidth/2-boxWidth,
            "top":windowHeight/2-boxHeight
        });
        $("#overlay_box").children("img").css({
            "display":"none",
            "max-width":windowWidth-50,
            "max-height":windowHeight-50
        }).onImagesLoaded(function(_img){
            $(_img).fadeIn(1000);
            var boxHeight = $("#overlay_box").height()/2;
            var boxWidth = $("#overlay_box").width()/2;
            $("#overlay_box").css({
                "left":windowWidth/2-boxWidth,
                "top":windowHeight/2-boxHeight
            }).removeClass("loadingPic");
        });
        
        $('#overlay_wrap').fadeIn('fast');
        return false;
    });

    $('#overlay').click(function(){
        $('#overlay_wrap').fadeOut('fast');
    });

};


$(document).ready(function(e) {
    $("a").has("img").lightBox();    
});
Bin noch neu in jQuery und hoffe, jemand hat den Durchblick und kann mir da helfen
icon_wink.gif


Tipps und Kritik an meinem Stil werden gern gesehen!

Edit: Hat sich schon erledigt. Anstelle von .onImagesLoaded() habe ich einfach .load() verwendet und es funktioniert.
 
Zuletzt bearbeitet:

Online-Statistiken

Zurzeit aktive Mitglieder
1
Zurzeit aktive Gäste
65
Besucher gesamt
66

Beliebte Forum-Themen

Zurück
Oben Unten