在触发 Colorbox 事件时禁用键盘快捷键，然后在触发另一个事件时恢复它？

Question

我正在使用 jQuery Colorbox 库，它是一个创建模式的库，可以在漂亮的弹出模式中加载图像和其他内容 window。

我在我的 portfolio/projects 页面上使用它来允许单击屏幕截图图像，它会将图像的较大视图加载到弹出模式 window。在 Colorbox 模式中打开时，我可以使用键盘 LEFT 和 RIGHT 键在页面上附加了 colorbox 的所有图像之间导航。

我的问题是我的项目页面上也有一些 JavaScript 设置，以允许用户使用 LEFT 和 RIGHT 箭头键导航到下一个和上一个项目页。

因此，在查看项目页面时，左右箭头键可以完美地加载和浏览我的整个作品集。只要我点击一张加载到 Colorbox 模态 window 中的图像。我运行进入我的问题！

现在我的项目导航箭头键继续工作，但我的 Colorbox 键导航不起作用。

虽然打开和关闭模式时，Colorbox 会触发一些 EVENTS。

所以我希望当模式打开时，我可以禁用我的项目键盘导航。

关闭同一个模态框后，我可以将键盘导航功能恢复到我的项目中！

问题是我不知道该怎么做，需要一些帮助！？

我在下面有有用的代码片段...

以及 jQuery Colorbox Modal 库的文档站点 http://www.jacklmoore.com/colorbox/

这是处理我的项目键盘导航的代码。

  // Handle Right and Left Keyboard Arrow presses to navigate to Next or Previous Project
  $("body").keydown(function(e) {
    if(e.which === 37) { // left
      $("#page-left").parent("a")[0].click();
    }
    else if(e.which === 39) { // right
      $("#page-right").parent("a")[0].click();
    }
  });

这是处理我的 Colorbox 初始化的代码。

  // Setup my Colorbox modal for project images
  $(".projectFUllModal").colorbox({
    rel:'projectFUllModal',
    transition:"none",
    width:"90%",
    height:"90%"
  });

下面的代码是来自 Colorbox 文档的示例代码，说明如何使用它可以触发的事件。

  // Colorbox Event for Opening a Modal
  $(document).bind('cbox_open', function(){
    // Disable my Project keyboard navigation functionality
  });

  // Colorbox Event for Closing a Modal
  $(document).bind('cbox_closed', function(){
    // Restore my Project keyboard navigation functionality
  });

可用的彩盒事件

  cbox_open triggers when Colorbox is first opened, but after a few key variable assignments take place.
  cbox_load triggers at the start of the phase where content type is determined and loaded.
  cbox_complete triggers when the transition has completed and the newly loaded content has been revealed.
  cbox_cleanup  triggers as the close method begins.
  cbox_closed triggers as the close method ends.

Answer 1

这实际上应该很容易解决，通过添加一个布尔变量：

// Handle Right and Left Keyboard Arrow presses to navigate to Next or Previous Project
var canUseArrows = true;
$("body").keydown(function(e) {
    if(e.which === 37 && canUseArrows) { // left
        $("#page-left").parent("a")[0].click();
    }
    else if(e.which === 39 && canUseArrows) { // right
        $("#page-right").parent("a")[0].click();
    }
});

函数将简单地更改为：

// Colorbox Event for Opening a Modal
$(document).bind('cbox_open', function(){
    canUseArrows = false;
});

// Colorbox Event for Closing a Modal
$(document).bind('cbox_closed', function(){
    canUseArrows = true;
});

Here's a fiddle showing it working, with checkbox checked simulating a cbox being open.

Answer 2

我不确定这是什么时候添加的，但现在您可以使用 arrowKey 选项来禁用颜色框中的箭头键导航。

在触发 Colorbox 事件时禁用键盘快捷键，然后在触发另一个事件时恢复它？

Disable keyboard shortcut when Colorbox Event is fired and then Restore it when another Event fires?

javascript

jquery

keyboard-events

colorbox