JavaScript Modifizieren des jQuery Plugins Supersized

[Deadeye]

Moin!

Ich benutze das Wordpress Plugin Supersized (http://buildinternet.com/project/supersized/slideshow/3.2/demo.html / http://wordpress.org/plugins/wp-supersized/) und würde es gerne folgendermaßen modifizieren:
Es gibt einen tray button, welcher auf Klick ein div mit thumbnails erscheinen lässt (siehe beim ersten Link den Button rechts unten).
Klickt man nochmal auf den Button, verschwindet dieses div wieder (toggle-Funktion).

Nun brauche ich folgendes zusätzliches Feature: Sobald der Benutzer außerhalb dieses DIVs klickt, soll das DIV auch verschwinden.

Dies müsste die Funktion sein, die man ändern muss:

a(vars.thumb_tray).animate({
            bottom: -a(vars.thumb_tray).height()
        }, 0);
        a(vars.tray_button).toggle(function () {
            a(vars.thumb_tray).stop().animate({
                bottom: 0,
                avoidTransforms: true
            }, 300);
            if (a(vars.tray_arrow).attr("src")) a(vars.tray_arrow).attr("src", vars.image_path + "button-tray-down.png");
            return false
        }, function () {
            a(vars.thumb_tray).stop().animate({
                bottom: -a(vars.thumb_tray).height(),
                avoidTransforms: true
            }, 300);
            if (a(vars.tray_arrow).attr("src")) a(vars.tray_arrow).attr("src", vars.image_path + "button-tray-up.png");
            return false
        });

Kann mir da jemand helfen? Leider sind meine JS/jQuery Kenntnisse sehr beschränkt. :/

 

[nVentor]

Kurz gegooglet. Ich finde die hier beschriebene Lösung des Event-Handlings sehr elegant: stackoverflow.com: how-to-detect-a-click-outside-an-element

Für einen geschmeidigen Übergang kann ich empfehlen, ein wenig mit den jQuery Faders und Slider rumzuspielen. Die API-Doku bringt einen da imho sehr gut voran.

Ich hoffe, das hilft dir weiter. Ich schau die Tage nochmal in den Thread rein.

 

[Deadeye]

Ok, danke.
Hab das Script jetzt folgendermaßen umgebaut (Zeile 1-5 sind neu):

            a(vars.tray_button).click(function(event) {
                $('html').one('click',function() {
                        a(vars.thumb_tray).animate({bottom:'-130px'}, 200) 
                 });
            });
            a(vars.thumb_tray).animate({
                bottom: -a(vars.thumb_tray).height()
            }, 0);
            a(vars.tray_button).toggle(function () {
                a(vars.thumb_tray).stop().animate({
                    bottom: 0,
                    avoidTransforms: true
                }, 300);
                if (a(vars.tray_arrow).attr("src")) a(vars.tray_arrow).attr("src", vars.image_path + "button-tray-down.png");
                return false
            }, function () {
                a(vars.thumb_tray).stop().animate({
                    bottom: -a(vars.thumb_tray).height(),
                    avoidTransforms: true
                }, 300);
                if (a(vars.tray_arrow).attr("src")) a(vars.tray_arrow).attr("src", vars.image_path + "button-tray-up.png");
                return false
            });

Wenn ich jetzt außerhalb des Thumb-Trays klicke, wird das DIV geschlossen.
Problem: Erst beim 2ten Klick des Tray-Buttons wird das Thumb-Tray-DIV wieder nach oben animiert.

 

[nVentor]

Das klingt doch schonmal vielversprechend. Jetzt musst du nur noch schauen, dass die Variable, die sich den aktuelle Zustand merkt, auch mitgeändert wird. Dein Skript kriegt das momentan einfach nicht mit und will nochmal schließen.
Zeilen 14 und 21 erledigen das für den Button. Versuch mal in deinem neuen Aufruf so wie in Zeile 21 zu sagen, dass deine Box geschlossen ist.

 

[Deadeye]

Hab den Code noch folgendermaßen verändert:

                a(vars.tray_button).click(function(event) {                         
                  $(document.body).mousedown(function(event) {
                        var target = $(event.target);
                      if (!target.parents().andSelf().is(vars.thumb_tray))
                        a(vars.thumb_tray).animate({bottom: -a(vars.thumb_tray).height()}, 200)  
                   });
                });
                                
                a(vars.thumb_tray).animate({
                        bottom: -a(vars.thumb_tray).height()
                    }, 0);
                       
                a(vars.tray_button).on('click',function() {
                    if(a(vars.thumb_tray).css("bottom") !=0) 
                    {
                        a(vars.thumb_tray).stop().animate({
                            bottom: 0,
                            avoidTransforms: true
                        }, 300);
                        if (a(vars.tray_arrow).attr("src")) a(vars.tray_arrow).attr("src", vars.image_path + "button-tray-down.png");
                        return false
                    }
                    else 
                    {
                        a(vars.thumb_tray).stop().animate({
                            bottom: -a(vars.thumb_tray).height(),
                            avoidTransforms: true
                        }, 300);
                        if (a(vars.tray_arrow).attr("src")) a(vars.tray_arrow).attr("src", vars.image_path + "button-tray-up.png");
                        return false
                    };
                });

Jetzt funktioniert schonmal, dass, wenn man innerhalb des Thumb-Trays klickt, nichts passiert. Und bei Klick außerhalb wird die Leiste geschlossen.
Soweit so gut. Dafür bewirkt aber ein Klick außerhalb auch, dass die Leiste immer wieder ein- und ausgeblendet wird. Das stimmt also noch nicht (einblenden soll ja nur über den Tray-Button passieren).
Außerdem funktioniert das Schließen über den Tray-Button auch nicht.

Ne Ahnung wo jetzt noch der Fehler liegt?