Navigieren Sie mit der Tastatur im Galerie-Shortcode

Ich verwende den WordPress Gallery-Shortcode und ich frage mich, ob es eine Möglichkeit gibt, mit den Pfeiltasten zu navigieren. Zum Beispiel, wenn ich ein einzelnes Bild anschaue und mit dem Pfeil nach rechts zum nächsten Bild im Galerie-Set navigiere. Irgendeine Idee, wie man das macht?

Solutions Collecting From Web of "Navigieren Sie mit der Tastatur im Galerie-Shortcode"

Das Starter-Thema Unterstriche (_s) wird mit einem Tastaturnavigationsskript geliefert. Ich habe das selbst nicht getestet. Aber die JS-Datei sieht so aus:

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

Es benötigt auch einige Änderungen an der Anhang-Design-Datei, damit die Links korrekt funktionieren. Mein Vorschlag ist, dass Sie das _s-Theme herunterladen und in die image.php- Datei schauen .

Grundsätzlich ist auf der Anhangseite eine Verknüpfung zum nächsten / vorherigen Bild innerhalb eines Elements mit der class “Vorheriges Bild” / “Eintrag-Anhang” erforderlich.

Ich verwende Standard-WP-Galerien und verlinke jedes Bild auf eine Anhangsseite, auf der das Bild in voller Größe angezeigt wird. Um PREVIOUS- und NEXT-Links anzuzeigen , damit der Benutzer zu den entsprechenden Bildern gelangen kann, waren die functionen previous_image_link und next_image_link nützlich.

In meiner attachment.php habe ich die folgenden Zeilen, damit WordPress vorherige / nächste Links anzeigt:

 

Dies führt zu einem Markup, das wie folgt aussehen könnte:

  

Mein Klient wollte mit seiner Tastatur zwischen den Bildern einer Galerie hin- und herwechseln können, also fügte ich das jQuery-Skript von jzatt hinzu und editierte es in meiner footer.php , die auf das KEYDOWN-Ereignis wartet und, wenn es ausgetriggers wird, die Links ergreift WP stellt zur Verfügung und ändert die URL der Seite.

Dies ist das jQuery-Skript:

  

Was ich hinzufügen muss, ist eine IF-statement, die zuerst überprüft, ob der Benutzer tatsächlich auf einer Anhangsseite ist.