PrettyPhoto 模式打开时禁用键盘导航 (Wordpress)

Question

我正在从 CDN 加载 jQuery PrettyPhoto。我有这个 JS 可以从键盘启用帖子导航：

  // Add keyboard navigation for the next & previous post buttons
  $(document).keydown(function (e) {
    var url = false;
    if (e.which == 37) { // Left arrow key code
      url = $('a.prev-post').attr('href'); // change to match the pagination link classes in your theme
    } else if (e.which == 39) { // Right arrow key code
      url = $('a.next-post').attr('href');
    }
    if (url) {
      window.location = url;
    }
  });

我想添加一个布尔值，以防止在 PP 模式打开时执行此代码，但我不知道该怎么做。 PP中的相关代码是：

// Window/Keyboard events
$(window).unbind('resize.prettyphoto').bind('resize.prettyphoto',function(){ _center_overlay(); _resize_overlay(); });

if(pp_settings.keyboard_shortcuts) {
  $(document).unbind('keydown.prettyphoto').bind('keydown.prettyphoto',function(e){
    if(typeof $pp_pic_holder != 'undefined'){
      if($pp_pic_holder.is(':visible')){
        switch(e.keyCode){
          case 37:
            $.prettyPhoto.changePage('previous');
            e.preventDefault();
            break;
          case 39:
          $.prettyPhoto.changePage('next');
          e.preventDefault();
          break;
          case 27:
          if(!settings.modal)
            $.prettyPhoto.close();
            e.preventDefault();
            break;
        };
        // return false;
      };
    };
  });
};

我知道我可以在帖子导航上做这样的事情：

  // Add keyboard navigation for the next & previous post buttons

 var canUseArrows = true;
 $(document).keydown(function (e) {
    var url = false;
    if (e.which == 37 && canUseArrows) { // Left arrow key code
      url = $('a.prev-post').attr('href'); // change to match the pagination link classes in your theme
    } else if (e.which == 39 && canUseArrows) { // Right arrow key code
      url = $('a.next-post').attr('href');
    }
    if (url) {
      window.location = url;
    }
  });

但我不确定如何挂钩 PP 函数。

感谢收看，

Answer 1

这可能会更有效率。

// Add keyboard navigation for the next & previous post buttons
$(document).keydown(function (e) {
var url = false,
// Check if the modal is open/visible.
canNavi = ( ! $( '.pp_pic_holder' ).length );
if (canNavi && e.which == 37) { // Left arrow key code
  url = $('a.prev-post').attr('href'); // change to match the pagination link classes in your theme
} else if (canNavi && e.which == 39) { // Right arrow key code
  url = $('a.next-post').attr('href');
}
if (url) {
  window.location = url;
}

});

来自 jQuery 文档：

• 因为 :visible 是 jQuery 扩展而不是 CSS 规范的一部分，所以使用 :visible 的查询不能利用 本机 DOM querySelectorAll() 提供的性能提升 方法。使用 :visible 来选择时达到最佳性能 元素，首先使用纯 CSS 选择器选择元素，然后 使用 .filter(":visible")。

• 大量使用此选择器可能会影响性能，因为它可能会强制浏览器在确定之前重新渲染页面 能见度。通过其他方法跟踪元素的可见性， 例如，使用类可以提供更好的性能。

Answer 2

似乎不可能“挂钩到 PP 功能”；但是，我尝试了以下方法，它对我有用：

  // Add keyboard navigation for the next & previous post buttons
  $(document).keydown(function (e) {
    var url = false,
      // Check if the modal is open/visible.
      canNavi = ! $('.pp_pic_holder').is(':visible');
    if (canNavi && e.which == 37) { // Left arrow key code
      url = $('a.prev-post').attr('href'); // change to match the pagination link classes in your theme
    } else if (canNavi && e.which == 39) { // Right arrow key code
      url = $('a.next-post').attr('href');
    }
    if (url) {
      window.location = url;
    }
  });