Warning: file_get_contents(/data/phpspider/zhask/data//catemap/2/jquery/86.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Jquery fullPage.js&;Fancybox多键盘滚动条_Jquery_Fancybox_Fullpage.js - Fatal编程技术网

Jquery fullPage.js&;Fancybox多键盘滚动条

Jquery fullPage.js&;Fancybox多键盘滚动条,jquery,fancybox,fullpage.js,Jquery,Fancybox,Fullpage.js,我试图保留fullPage.js和fancbox.js插件的默认键滚动功能。因此,我希望为这两个脚本启用左和右功能。但是,我希望在fancybox打开时(例如,当覆盖打开且图像缩放时),fullPage.js上的键滚动功能被禁用。其目标是允许用户在fancybox打开时在画廊图像之间左右滚动,而不是在覆盖层下方的“幻灯片”之间切换 这是我的密码: $(document).ready(function() { $(".fancybox").fancybox({ openEffect :

我试图保留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){}
    });
});

只需使用fancybox的一个回调,例如
onStart
,然后调用fullpage方法来禁用fullpage键盘功能

然后,要再次激活它,请使用相同方法但值相反的
onClosed

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

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

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

最终使用了Alvero建议的Fancybox回调方法。我忘了提到我使用的Fancybox 2与原来的Fancybox有不同的回调方法。此处是Fancybox 2文档的链接:。这是我的最终代码:

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

}))

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

}))

拳头,谢谢。谢谢你说,你能详细说明一下你的解决方案吗?我试图实现,但没有成功。使用您建议的解决方案,我必须更新Fancybox 2的回调。非常感谢你的帮助!非常感谢。