fullPage.js& Fancybox多键盘滚动

时间:2014-03-27 19:56:22

标签: jquery fancybox fullpage.js

我正在尝试保留fullPage.js和fancbox.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){}
    });
});

3 个答案:

答案 0 :(得分:4)

只需使用fancybox的其中一个回调,例如onStart,然后调用fullpage方法$.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);
    }
});

答案 1 :(得分:1)

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

});

答案 2 :(得分:1)

setKeyboardScrolling对我不起作用,所以我使用了setAutoScrolling而且效果很好!

int* p = new int[2];
delete p;

});