JavaScript Modifizieren des jQuery Plugins Supersized

Deadeye

Ensign
Dabei seit
Sep. 2002
Beiträge
175
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:

Code:
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. :/
 
Zuletzt bearbeitet:

Deadeye

Ensign
Ersteller dieses Themas
Dabei seit
Sep. 2002
Beiträge
175
Ok, danke.
Hab das Script jetzt folgendermaßen umgebaut (Zeile 1-5 sind neu):

Code:
            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

Cadet 4th Year
Dabei seit
Dez. 2011
Beiträge
107
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

Ensign
Ersteller dieses Themas
Dabei seit
Sep. 2002
Beiträge
175
Hab den Code noch folgendermaßen verändert:

Code:
                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?
 
Top