Мое значение переменной изменилось, как обновить мою функцию соответственно?

Question

У меня эта проблема больше недели, и она сводит меня с ума. Я не "кодовый" парень, и, несмотря на то, что мне удалось зайти так далеко, я действительно достиг своего предела. Я надеюсь, что кто-то может помочь мне решить мою проблему.

Итак, вот моя проблема: я использую три плагина: Flexslider, Inviewevent ( https://remysharp.com/2009/01/26/element-in-view-event-plugin) и Scrollify. Мой веб-сайт разделен на разделы, каждый раздел является полноэкранным, и благодаря плагину scrollify и системе его путевых точек каждый раз, когда пользователь выполняет прокрутку или использует клавиатуру, веб-сайт автоматически переходит к следующей путевой точке с анимацией слайдов. Поскольку каждый раздел является полноэкранным, я отключил полосу прокрутки. Я использую Flexslider, потому что я пытаюсь позволить пользователю прокручивать вертикально и горизонтально. Чтобы дать вам идею, я был очень вдохновлен этим сайтом, и в основном пытался достичь того же: http://www.kunstler.it/.

Теперь плагин Flexslider имеет опцию "клавиатура". Это логическое значение. Если "true", пользователь может использовать стрелки на клавиатуре для перехода от слайда к слайду. Моя проблема в том, что, даже когда я не в поле зрения (когда я нахожусь в другом разделе моего сайта), ползунок все еще регистрирует ввод с клавиатуры, и это беспокоит меня. Я не хочу, чтобы пользователь мог манипулировать слайдером, когда он не виден. Поэтому я использую плагин Inviewevent, чтобы создать условие: если слайдер виден, то клавиатура работает, если нет, то она не работает. Я также сделаю то же самое для функции касания пальцем на мобильном телефоне, но, поскольку плагин также предлагает опцию для этого, сейчас я сосредоточусь на клавиатуре, так как в принципе это должно быть то же самое.

Вот мой 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.

});

Итак, это все. Это может быть совершенно другой метод для всех меня, и в любом случае, это уже чудо, что я зашел так далеко. Я почти уверен, что некоторые из моих действий не эргономичны и не рекомендованы, поэтому не стесняйтесь их исправлять, если вам так хочется. Я также хотел бы извиниться за отсутствие ясности, мой словарный запас / орфографические ошибки и возможное странное предложение: английский не является моим родным языком. Также имейте в виду, что я плохо умею кодировать. HTML и CSS - это просто, но javascript на самом деле не мой друг, хотя я понимаю его теорию. И последнее, я хотел добавить ссылки на все плагины, которые я использую, но я не могу опубликовать более двух ссылок, так как у меня пока недостаточно репутации. Я сохранил Inviewevent только потому, что его сложнее всего найти, остальное легко найти через Google. Я действительно сожалею об этом.

Так что вот и все... Я, очевидно, готов ответить на ваши вопросы, или если вам понадобится что-то уточнить. Не беспокойтесь о своем английском: я понимаю это лучше, чем пишу. И наконец; если вы решите заняться техническим делом, пожалуйста, попробуйте объяснить это мне, поскольку я не хочу просто копировать / вставлять, но я хочу учиться и совершенствовать себя. Заранее спасибо, Сердечно, Какой-то ошарашенный парень:)

Answer 1

Итак, мне удалось это исправить, вроде как. Важно то, что он делает то, что я от него хочу: когда он не виден, пользователь не может вручную запустить слайд.

Я использовал модифицированную версию Flexslider, которая включает метод уничтожения (найти его можно здесь: https://github.com/bradgreens/FlexSlider/tree/release-2-2-0)

И я использовал плагин inviewevent и объединил его с методом destroy, чтобы добиться того, что я хотел:

$('#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();  
            }
        },
    });
};

Моя идея состояла в том, чтобы уничтожить, а затем повторно инициализировать функцию, чтобы она учитывала мою переменную, но правда состоит в том, что уничтожение ее, когда она находится вне поля зрения, и инициализация, когда она находится в поле зрения, работает идеально (хотя очень короткий эффект "pop", когда его инициализирую - почти не видно).

Надеюсь это поможет!

Answer 2

Вам придется изменить плагин, если нужная вам функциональность не является встроенной. Вы правы в том, что это свойство "клавиатуры" используется только при инициализации - это распространенный шаблон для плагинов jQuery.