I'm trying to keep the default key scroll functionality for fullPage.js and fancbox.js plugins. So, I would like to keep left and right functionality enabled for both scripts. However, I wish to have the key scroll functionality on fullPage.js disabled when the fancybox is open (eg when the overlay is on and the image is zoomed). The goal is to allow the user to scroll left and right between gallery images when fancybox is open but not switch between "slides" below the overlay.
Here is my code:
$(document).ready(function() {
$(".fancybox").fancybox({
openEffect : 'none',
closeEffect : 'none',
keys : true,
});
$.fn.fullpage({
verticalCentered: true,
resize : true,
anchors:['firstSlide', 'secondSlide'],
scrollingSpeed: 700,
easing: 'easeInQuart',
menu: false,
navigation: false,
navigationPosition: 'right',
navigationTooltips: ['firstSlide', 'secondSlide'],
slidesNavigation: true,
slidesNavPosition: 'bottom',
loopBottom: false,
loopTop: false,
loopHorizontal: false,
autoScrolling: false,
scrollOverflow: false,
css3: false,
fixedElements: '#element1, .element2',
normalScrollElements: '#element1, .element2',
keyboardScrolling: true,
touchSensitivity: 15,
continuousVertical: false,
animateAnchor: true,
//events
onLeave: function(index, direction){},
afterLoad: function(anchorLink, index){},
afterRender: function(){},
afterSlideLoad: function(anchorLink, index, slideAnchor, slideIndex){},
onSlideLeave: function(anchorLink, index, slideIndex, direction){}
});
});
Just use one of the callbacks of fancybox such as onStart
and then call the fullpage method $.fn.fullpage.setKeyboardScrolling(false);
to disable the fullpage keyboard functionality.
Then to activate it again, use onClosed
with the same method but opposite value.
$(".fancybox").fancybox({
openEffect : 'none',
closeEffect : 'none',
keys : true,
onStart: function() {
$.fn.fullpage.setKeyboardScrolling(false);
}
onClose: function() {
$.fn.fullpage.setKeyboardScrolling(true);
}
});
Ended up using Fancybox's callback methods as Alvero suggested. I neglected to mention that am using Fancybox 2 which has different callback methods than the original Fancybox. Here a link to Fancybox 2 documentation: http://fancyapps.com/fancybox/#docs. Here is my final code:
$(document).ready(function() {
$.fn.fullpage({
verticalCentered: true,
resize : true,
anchors:['firstSlide', 'secondSlide'],
scrollingSpeed: 700,
easing: 'easeInQuart',
menu: false,
navigation: false,
navigationPosition: 'right',
slidesNavigation: true,
slidesNavPosition: 'side',
loopBottom: false,
loopTop: false,
loopHorizontal: false,
autoScrolling: false,
scrollOverflow: false,
css3: false,
keyboardScrolling: true,
touchSensitivity: 15,
continuousVertical: false,
animateAnchor: true,
});
$(".fancybox").fancybox({
openEffect : 'none',
closeEffect : 'none',
keys : true,
beforeLoad : function() {
$.fn.fullpage.setKeyboardScrolling(false);
},
afterClose: function() {
$.fn.fullpage.setKeyboardScrolling(true);
}
});
});
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With