fullPage.js＆Fancybox多键盘滚动

我想保持fullPage.js和fancbox.js插件的默认键滚动功能。所以，我想为这两个脚本保持左右功能。不过，我希望在fancybox打开时（例如叠加打开并且图像被缩放），关闭fullPage.js上的关键滚动功能。目标是允许用户在fancybox打开时在图库图像之间左右滚动，但不能在覆盖图下方的“幻灯片”之间切换。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){} 
    }); 
});

来源

2014-03-27 seanroberts.me

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

}）;

来源

2014-03-28 14:33:19

只需使用的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); 
    } 
});

来源

2014-03-28 09:51:16 Alvaro

拳头，谢谢。谢谢，能否详细解释一下你的解决方案？我试图实现，但没有运气。 –

得到它使用您建议的解决方案 - 我必须更新Fancybox 2的回调。非常感谢您的帮助！非常感激。 –

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

}）;

来源

2016-01-12 21:35:07 user2584945

fullPage.js＆Fancybox多键盘滚动

回答

相关问题