I have this problem since more than a week and it's making me crazy. I'm not a "code" kinda guy, and despite the fact that I managed to go this far, I'm really reaching my limit. I hope someone can help me solve my problem.
So, here is my problem : I'm am using three plugins : Flexslider, Inviewevent (https://remysharp.com/2009/01/26/element-in-view-event-plugin) and Scrollify. My website is divided in sections, every section is fullscreen, and thanks to the scrollify plugin and its waypoints system, everytime the user scroll or use the keyboard, the website scroll automatically to the next waypoint with a slide animation. Since every section is full screen, I deactivated the scrollbar. I'm using Flexslider because I am trying to allow the user to scroll vertically and horizontally. To give you an idea, I was extremely inspired by this website, and basically trying to achieve the same thing : http://www.kunstler.it/.
Now, the Flexslider plugin has an option called "keyboard". It's a boolean. If "true", the user can use the arrows on his keyboard to go from slide to slide. My problem is that even when out of view (when I'm on a different section of my website), the slider is still registering the keyboard input, and it bothers me. I don't want the user to be able to manipulate the slider when it is out of view. So I'm using the plugin Inviewevent to make a condition : if the slider is in view, then the keyboard works, if not then it doesn't work. I will also do the same for the touch swipe function on mobile, but since the plugin also offers an option for this, I am focusing on the keyboard for now since it should be basically the same thing.
Here is my 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.
});
So that's it. It could be a completely different method for all I care, and anyway, it's already a miracle I went this far. I'm pretty sure some of the things I did are not ergonomic or recommended, so do not hesitate to correct it if you feel like it. I also would like to apology for my lack of clarity, my vocabulary/spelling mistakes and the eventual odd sentence : english is not my native language. Also keep in mind that I am bad at coding. HTML and CSS are piece of cake, but javascript is not really my friend even though I undertsand its theory. One last thing, I wanted to add the links to all the plugins that I use, but I cannot post more than 2 links since I do not have enough reputation yet. I kept Inviewevent only because it is the hardest to find, the rest is easilly accessible through google. I am really sorry about this.
So that's about it... I'm obviously available if you have any question or if you need me to precise anything. Do not worry about your english : I understand it way better than I write it. And finally ; if you decide to go technical, please try to explain it to me, since I don't want to just copy/paste, but I want to learn and improve myself. Thank you in advance, Cordially, Some dumbfounded guy :)
So, I manage to fix this myself, kinda. The important thing is that it does what I want it to do : when out of view, it's impossible for the user to trigger any slide manually.
I used a modified version of Flexslider which includes a destroy method (find it here: https://github.com/bradgreens/FlexSlider/tree/release-2-2-0)
And I used the inviewevent plugin and combined it with the destroy method to achieve what I wanted :
$('#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();
}
},
});
};
My idea was to destroy then re initialize the function so it would take my variable into consideration, but the truth is that destroying it when out of view and initializing it when in view works perfectly (although there is a very short "pop" effect when it initialize - almost not visible).
Hope this helps !