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

Question

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

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

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

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

似乎不可能"hook into the PP function"；但是，我尝试了以下方法，它对我有用：

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

Answer 2

这样效率可能会高一些。

// 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 文档：

Because :visible is a jQuery extension and not part of the CSS specification, queries using :visible cannot take advantage of the performance boost provided by the native DOM querySelectorAll() method. To achieve the best performance when using :visible to select elements, first select the elements using a pure CSS selector, then use .filter(":visible").

Using this selector heavily can have performance implications, as it may force the browser to re-render the page before it can determine visibility. Tracking the visibility of elements via other methods, using a class for example, can provide better performance.

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

Disable keyboard navigation (Wordpress) when PrettyPhoto modal is open

javascript

jquery

wordpress

prettyphoto