Jquery fullPage.js&;Fancybox多键盘滚动条
我试图保留fullPage.js和fancbox.js插件的默认键滚动功能。因此,我希望为这两个脚本启用左和右功能。但是,我希望在fancybox打开时(例如,当覆盖打开且图像缩放时),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 :
$(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的回调。非常感谢你的帮助!非常感谢。