fullPage.js 和 Fancybox 多键盘滚动答案

【问题标题】：fullPage.js & Fancybox Multiple Keyboard ScrollfullPage.js 和 Fancybox 多键盘滚动
【发布时间】：2014-05-07 00:48:13
【问题描述】：

我正在尝试为 fullPage.js 和 fancbox.js 插件保留默认的键滚动功能。所以，我想为这两个脚本启用左右功能。但是，我希望在打开幻想框时禁用 fullPage.js 上的键滚动功能（例如，当覆盖打开并且图像被缩放时）。目标是允许用户在 fancybox 打开时在画廊图像之间左右滚动，但不能在叠加层下方的“幻灯片”之间切换。

这是我的代码：

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

【问题讨论】：

标签： jquery fancybox fullpage.js

【解决方案1】：

只需使用fancybox的回调之一，例如onStart，然后调用整页方法$.fn.fullpage.setKeyboardScrolling(false);即可禁用整页键盘功能。

然后再次激活它，使用onClosed，方法相同但值相反。

$(".fancybox").fancybox({
    openEffect  : 'none',
    closeEffect : 'none',
    keys  : true,

    onStart:  function() {
        $.fn.fullpage.setKeyboardScrolling(false);
    }

    onClose:  function() {
        $.fn.fullpage.setKeyboardScrolling(true);
    }
});

【讨论】：

拳头，谢谢。谢谢说，你能详细说明一下你的解决方案吗？我试图实施但没有运气。
使用您建议的解决方案让它工作 - 我必须更新 Fancybox 2 的回调。非常感谢您的帮助！非常感谢。

【解决方案2】：

最终按照 Alvero 的建议使用了 Fancybox 的回调方法。我没有提到我正在使用 Fancybox 2，它具有与原始 Fancybox 不同的回调方法。这里是 Fancybox 2 文档的链接：http://fancyapps.com/fancybox/#docs。这是我的最终代码：

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

});

【讨论】：

【解决方案3】：

setKeyboardScrolling 不适合我，所以我改用 setAutoScrolling 并且效果很好！

$(document).ready(function() {
$(".fancybox").fancybox({
    maxWidth    : 800,
    maxHeight   : 600,
    fitToView   : false,
    width       : '30%',
    height      : '70%',
    autoSize    : false,
    closeClick  : false,
    openEffect  : 'none',
    closeEffect : 'none',
    helpers : {
    overlay : {
        locked : true
    }
},
beforeLoad :  function() {
    // Disable auto scrolling of page when fancybox is open
  $.fn.fullpage.setAutoScrolling(false);
},
afterClose:  function() {
    // Reenable autoscrolling of page when fancybox is closed
    $.fn.fullpage.setAutoScrolling(true);
}
});

});

【讨论】：