Я загружаю jQuery PrettyPhoto с CDN. У меня есть этот 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.
Спасибо, что посмотрели,



![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)


Кажется невозможным «подключиться к функции 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;
}
});
Это прекрасно работает. Я явно слишком много думал об этом.
Это может быть немного эффективнее.
// 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.
Это должно быть верно для $('.pp_pic_holder:visible') (выбор элементов), но не $('.pp_pic_holder').is(':visible') (фильтрация элементов выбранный). Потому что я считаю, что .is(':visible') похож на .filter(':visible') (хотя возвращаемое значение отличается), что jQuery рекомендует при фильтрации выбранных или согласованных элементов. Из .is() doc, «он позволяет вам тестировать содержимое объекта jQuery без изменений», которым в нашем случае является объект $('.pp_pic_holder').
Однако, если вы предпочитаете просто проверить свойство length (то есть $( '.pp_pic_holder' ).length), то я думаю, что решение остается за вами. знак равно
Спасибо; Я попробую и расскажу, как это работает.