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

Question

I am using the jQuery Colorbox library which is a library of creating Modals that can load images and other content in a nice popup modal window.

I am using it on my portfolio/projects page to allow clicking on a screenshot image and it will load a larger view of the image into a popup modal window. When opened in the Colorbox modal, I can use my keyboards LEFT and RIGHT keys to navigate between all my images that have colorbox attachedon the page.

My issue is that I also have some JavaScript setup on my project page to allow the user to use LEFT and RIGHT arrow keys to navigate to the Next and Previous project page.

So when viewing a Project page, left and right arrow keys works perfectly to loads and browse through my whole portfolio. As soon as I click on an image which loads in a Colorbox modal window. I run into my issue!

Now my arrow keys for Project navigation continue to work but my Colorbox key navigation does not work.

Colorbox fires off some EVENTS when a modal is opened and closed though.

---

So I am hoping that when a modal is opened, I can disable my Projects keyboard navigation.

When that same Modal is closed, I can restore the keyboard navigation functionality back to my Projects!

The problem is I do not know how to do this and need some help please!?

I have useful code snippets below...

As well as the Documentation site for the jQuery Colorbox Modal library here http://www.jacklmoore.com/colorbox/

This is the code that handles my Project keyboard navigation.

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

This is the code that handles my Colorbox initiation.

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

This code below is example code from the Colorbox docs for how to use the Events it can fire off.

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

Available Colorbox Events

  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

This should actually be pretty easy to fix, via adding a boolean var:

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

And the functions would simply be changed to:

// 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.