Intereting Posts
Как мне удалить из строя домашнюю страницу? Пользовательская функция для формы поиска Сделать элементы управления настраиваемым пользовательским значением типа настройки Проверьте версию внешней библиотеки Enqueue'd JSON недействителен после сообщений json_encode Включение или не вложение в очередь Каков наилучший вариант кеширования для многостраничного сайта WordPress на не-общедоступном хостинге? Где отредактировать шаблон, который генерирует код для левой стороны боковой панели dynamic_sidebar в теме Understrap? Как получить пользовательские данные из пользовательской таблицы в базе данных wordpress по ID пользователя? Неверный URL для совместного использования блога на linkedin Изменить аватар на страницу с тематическим профилем Размещение тегов <div> в текстовом редакторе WordPress с использованием коротких кодов Показать пользовательский тип сообщения внутри настраиваемого типа сообщения Как добавить встроенное слово после имени автора комментария автора? Как только показать все сообщения, связанные с категорией

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

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

Solutions Collecting From Web of "Перемещение с клавиатуры в Shortcode галереи"

Для этой темы темы подчеркивания (_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, чтобы сначала проверить, действительно ли пользователь находится на странице вложения.