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多鍵盤滾動

回答

相關問題