Ergebnis 1 bis 1 von 1

Thema: jQuery Lightbox Overlay

  1. #1
    Avatar von Brainweaver
    Brainweaver Regelmäßiger Besucher
    Registriert seit
    18.11.2008
    Ort
    Munich, Germany
    Beiträge
    129
    Danksagungen
    0

    Standard jQuery Lightbox Overlay


    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

    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.
    Geändert von Brainweaver (21.09.2011 um 17:07 Uhr)

Um auf dieses Thema zu ANTWORTEN bitte sich zuerst » hier kostenlos registrieren!!
Neue Frage stellen?
Kurze Zusammenfassung der Frage:

Ähnliche Themen

  1. Ist JQuery besser als Flash?
    Von templater1 im Forum GFX, Webdesign und Programmierung
    Antworten: 3
    Letzter Beitrag: 12.01.2011, 10:28
  2. Grafikkarte Defekt/Kaputt ??
    Von Silence87 im Forum Hardware Allgemein
    Antworten: 5
    Letzter Beitrag: 24.05.2008, 23:12
  3. Lightbox 2 benutzen
    Von Icke im Forum GFX, Webdesign und Programmierung
    Antworten: 2
    Letzter Beitrag: 26.02.2008, 20:25
  4. ATI HD2600Pro Overlay Problem.
    Von NeuKasselER im Forum Grafikkarten
    Antworten: 2
    Letzter Beitrag: 14.12.2007, 16:49

Stichworte