Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

fullPage.js & Fancybox Multiple Keyboard Scroll

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){}
    });
});
like image 265
seanroberts.me Avatar asked Jan 10 '23 22:01

seanroberts.me


2 Answers

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);
    }
});
like image 152
Alvaro Avatar answered Jan 28 '23 17:01

Alvaro


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);
    }
});

});

like image 37
seanroberts.me Avatar answered Jan 28 '23 17:01

seanroberts.me