Search code examples
jqueryfancyboxfullpage.js

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

Solution

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

    });