Перемещение с клавиатуры в Shortcode галереи

Я использую короткий код WordPress Gallery, и мне было интересно, есть ли способ навигации с помощью клавиш со стрелками? Например, если я просматриваю одно изображение и использую стрелку вправо для перехода к следующему изображению в наборе галереи. есть идеи как это сделать?

Для этой темы темы подчеркивания (_s) для начинающих есть скрипт для навигации по клавиатуре. Я не проверял это сам. Но JS-файл выглядит так:

jQuery( document ).ready( function( $ ) { $( document ).keydown( function( e ) { var url = false; if ( e.which == 37 ) { // Left arrow key code url = $( '.previous-image a' ).attr( 'href' ); } else if ( e.which == 39 ) { // Right arrow key code url = $( '.entry-attachment a' ).attr( 'href' ); } if ( url && ( !$( 'textarea, input' ).is( ':focus' ) ) ) { window.location = url; } } ); } ); 

Он также нуждается в некоторых изменениях в вашем файле темы вложений, чтобы ссылки работали правильно. Мое предложение состоит в том, что вы загружаете тему _s и смотрите в файле image.php .

В основном то, что вам нужно на странице вложения, является ссылкой на следующее / предыдущее изображение внутри элемента с классом «предыдущее изображение» / «вступление».

Я использую стандартные галереи WP и каждую ссылку на изображение на страницу вложения, где изображение отображается в полноэкранном режиме. Чтобы показать ссылки PREVIOUS и NEXT, чтобы пользователь мог перейти к соответствующим изображениям, я нашел полезные функции previous_image_link и next_image_link полезными.

В моем файле attachment.php у меня есть следующие строки, чтобы WordPress отображал предыдущие / следующие ссылки:

 <div class="nav-links"> <?php previous_image_link( false, '<div class="previous-image">' . __( '<< Previous Image', '$text_domain' ) . '</div>' ); ?> <?php next_image_link( false, '<div class="next-image">' . __( 'Next image >>', '$text_domain' ) . '</div>' ); ?> </div> 

Это приводит к разметке, которая может выглядеть так:

 <div class="nav-links"> <a href="http://coolwebsite.com/attachment/03/"> <div class="previous-image">&lt;&lt; Previous Image</div> </a> <a href="http://coolwebsite.com/attachment/05/"> <div class="next-image">Next image &gt;&gt;</div> </a> </div> 

Мой клиент хотел иметь возможность использовать свою клавиатуру для переключения между изображениями любой галереи, поэтому я добавил скрипт jQuery jzatt и отредактировал его на моем footer.php, который прослушивает событие KEYDOWN и, если запускается, захватывает ссылки WP предоставил и изменил URL страницы.

Это сценарий jQuery:

 <script> $( document ).ready(function() { $( document ).keydown( function( e ) { /* In Galleries you can use LEFT and RIGHT ARROW KEYS to go to the previous/next image */ var url = false; if ( e.which == 37 ) { // Left arrow key code url = $( '.previous-image' ).parent().attr( 'href' ); } else if ( e.which == 39 ) { // Right arrow key code url = $( '.next-image' ).parent().attr( 'href' ); } //console.log("URL: "+url); if ( url && ( !$( 'textarea, input' ).is( ':focus' ) ) ) { window.location = url; } } ); }); </script> 

Однако мне нужно добавить инструкцию IF, чтобы сначала проверить, действительно ли пользователь находится на странице вложения.