Mein Variablenwert geändert, wie kann ich meine Funktion entsprechend aktualisieren?

Question

Ich habe dieses Problem seit mehr als einer Woche und es macht mich verrückt. Ich bin kein "Code" Typ, und trotz der Tatsache, dass ich es geschafft habe, so weit zu gehen, erreiche ich wirklich mein Limit. Ich hoffe, dass jemand mir helfen kann, mein Problem zu lösen.

Also, hier ist mein Problem: Ich bin mit drei Plugins: Flexslider, Inviewevent (https://remysharp.com/2009/01/26/element-in-view-event-plugin) und Scriffy. Meine Website ist in Abschnitte unterteilt, jeder Bereich ist Vollbild, und dank des Scrollify-Plugins und seines Wegpunktsystems blättert die Webseite bei jedem Blättern oder Benutzen der Tastatur automatisch zum nächsten Wegpunkt mit einer Folienanimation. Da jeder Abschnitt Vollbild ist, habe ich die Bildlaufleiste deaktiviert. Ich verwende Flexslider, weil ich versuche, den Benutzer vertikal und horizontal scrollen zu lassen. Um Ihnen eine Idee zu geben, war ich extrem inspiriert von dieser Website und versuchte im Prinzip, dasselbe zu erreichen: http://www.kunstler.it/.

Jetzt hat das Flexslider Plugin eine Option namens "keyboard". Es ist ein Boolescher Wert. Wenn "wahr", kann der Benutzer die Pfeile auf seiner Tastatur verwenden, um von Folie zu Folie zu gelangen. Mein Problem ist, dass der Slider, auch wenn er nicht in der Ansicht ist (wenn ich in einem anderen Bereich meiner Website bin), immer noch die Tastatureingabe registriert, und es stört mich. Ich möchte nicht, dass der Benutzer den Schieberegler manipulieren kann, wenn er nicht sichtbar ist. Also verwende ich das Plugin Inviewevent, um eine Bedingung zu machen: Wenn der Slider in Sicht ist, dann funktioniert die Tastatur, wenn nicht, dann funktioniert es nicht. Ich werde das gleiche auch für die Touch Swipe-Funktion auf dem Handy tun, aber da das Plugin auch eine Option dafür bietet, konzentriere ich mich jetzt auf die Tastatur, da es im Grunde dasselbe sein sollte.

Hier ist meine JQuery:

$(window).load(function(){ 
    var loopCount = 0; 
    var $keyboard; 

    $('.flexslider').bind('inview', function (event, visible) { // Plugin "Inviewevent". Allows me to detect if an element is inview or not 
     if (visible == true) { 
      $keyboard = true; 
      console.log($keyboard); // Is true 
     } 
     else { 
      $keyboard = false; 
      console.log($keyboard); // Is false 
     } 
    }); 
    $('.flexslider').flexslider({ // Plugin Flexslider. Contains the options and Callback that I use 
     slideshow: false, 
     animation: "slide", 
     controlNav: false, 
     directionNav: false, 
     animationLoop: false,   
     keyboard: $keyboard, // This is the option that I'm interested in. I tried to use the variable $keyboard to define it, but (to my very little knowledge) it would seem that it only works once when the function is initialised. It doesn't change dynamically which is what I'm trying to do. 
     end : function(slider){ // This callback fires when the user reaches the last slide 
      currentLoopCount = loopCount; 
      loopCount = currentLoopCount + 1; 
     }, 
     after : function(slider){ 
      if (loopCount > 0 && slider.currentSlide === 0){ 
       $.scrollify.next(); // Plugin Scrollify. When the user go back to the first slide, the wbesite automatically scroll to the next section. I suck at code and I find it very neat :D 
      } 
     }, 
    }); 
$('.button').click(function(){ 
     alert($keyboard); 
}); // This is not really important. I just used it to confirm the fact that the $keyboard variable do what I want it to do. When my slider is in view, it is true, and when it's not, it's false. No problem here. 

});

Also das ist es. Es könnte für mich eine völlig andere Methode sein, und trotzdem ist es schon ein Wunder, dass ich so weit gegangen bin. Ich bin mir ziemlich sicher, dass einige der Dinge, die ich gemacht habe, nicht ergonomisch oder empfohlen sind, also zögere nicht, es zu korrigieren, wenn dir danach ist. Ich möchte mich auch für meinen Mangel an Klarheit, meinen Wortschatz/Rechtschreibfehler und den eventuellen seltsamen Satz entschuldigen: Englisch ist nicht meine Muttersprache. Bedenken Sie auch, dass ich beim Codieren schlecht bin. HTML und CSS sind ein Stück Kuchen, aber Javascript ist nicht wirklich mein Freund, obwohl ich und seine Theorie undts. Eine letzte Sache, ich wollte die Links zu allen Plugins hinzufügen, die ich benutze, aber ich kann nicht mehr als 2 Links posten, da ich noch nicht genug Reputation habe. Ich habe Inviewevent nur behalten, weil es am schwierigsten zu finden ist, der Rest ist leicht zugänglich über Google. Es tut mir wirklich leid.

Also das ist es ... Ich bin offensichtlich verfügbar, wenn Sie irgendwelche Fragen haben oder wenn Sie mich brauchen, um irgendetwas zu präzisieren. Mach dir keine Sorgen über dein Englisch: Ich verstehe es viel besser als ich es schreibe. Und schlussendlich ; Wenn du dich entscheidest, technisch zu arbeiten, versuche es mir bitte zu erklären, da ich nicht nur kopieren/einfügen möchte, sondern ich selbst lernen und mich verbessern möchte. Vielen Dank im Voraus, Herzlichst, Einige sprachlos guy :)

Answer 1

Also, ich schaffe es, das selbst zu beheben, irgendwie. Wichtig ist, dass es genau das tut, was ich möchte: Wenn es nicht sichtbar ist, kann der Benutzer keine Folie manuell auslösen.

habe ich eine modifizierte Version von Flexslider, die ein Verfahren zerstören enthält (es hier finden: https://github.com/bradgreens/FlexSlider/tree/release-2-2-0)

Und ich verwendet, um die inviewevent Plugin und es mit der Methode destroy kombiniert zu erreichen, was ich wollte:

$('#portfolio').bind('inview', function (event, visible) { 
    if (visible == true){ 
     initflex(); 
    } 
    else if (visible == false){ 
     $('.flexslider').flexslider("destroy"); 
    } 
}); 

function initflex() { 
    $('.flexslider').flexslider({ //changed selector from .flexslider 
     slideshow: false, 
     animation: "slide", 
     controlNav: false, 
     directionNav: false, 
     animationLoop: false,   
     keyboard: true, 
     pauseInvisible: true, 
     multipleKeyboard: false, 
     controlNav: false, 
     end : function(slider){ 
      currentLoopCount = loopCount; 
      loopCount = currentLoopCount + 1; 
     }, 
     after : function(slider){ 
      if (loopCount > 0 && slider.currentSlide === 0){ // meh 
       $.scrollify.next(); 
      } 
     }, 
    }); 
}; 

Meine Idee war es zu zerstören dann wieder initialisieren die Funktion, so dass es meine Variable in Betracht ziehen würde, aber die Wahrheit ist, dass es zu zerstören, wenn es außer Sicht und Initialisierung, wenn in Sicht perfekt funktioniert (obwohl es eine sehr kurze "Pop "Effekt beim Initialisieren - fast nicht sichtbar."

Hoffe, das hilft!

Answer 2

Sie werden das Plugin zu ändern haben, wenn die Funktionalität die Sie suchen ist nicht eingebaut. Sie haben richtig eingeschätzt, dass diese "Tastatur" -Eigenschaft nur bei der Initialisierung verwendet wird - dies ist ein übliches Muster für jQuery-Plug-Ins.