it-swarm.com.de

Navigieren Sie mit der Tastatur im Galerie-Shortcode

Ich verwende den Wordpress Gallery-Shortcode und habe mich gefragt, ob es eine Möglichkeit gibt, mit den Pfeiltasten zu navigieren. Zum Beispiel, wenn ich ein einzelnes Bild betrachte und mit dem Rechtspfeil zum nächsten Bild in der Galerie navigiere. Irgendeine Idee, wie das geht?

5
Ruriko

Das Thema Unterstriche (_s) Starter wird mit einem Tastaturnavigationsskript geliefert. Ich habe das allerdings nicht selbst 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;
        }
    } );
} );

Außerdem müssen einige Änderungen an Ihrer Anhangs-Designdatei vorgenommen werden, damit die Links ordnungsgemäß funktionieren. Mein Vorschlag ist, dass Sie das Thema _s herunterladen und einen Blick in die Datei image.php werfen.

Grundsätzlich benötigen Sie auf der Anhangsseite einen Link zum nächsten/vorherigen Bild in einem Element mit der Klasse "vorheriges Bild"/"Eintragsanhang".

2
jzatt

Ich verwende WP Standardgalerien und habe für jedes Bild einen Link zu einer Anhangsseite, auf der das Bild in voller Größe angezeigt wird. Um VORHERIGE und NÄCHSTE Links anzuzeigen, damit der Benutzer zu den entsprechenden Bildern gelangt, fand ich die Funktionen Vorheriger_Bildlink und Nächster_Bildlink nützlich.

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

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

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

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

Mein Kunde wollte in der Lage sein, mit seiner Tastatur zwischen den Bildern einer Galerie hin und her zu wechseln. Deshalb habe ich das jQuery-Skript von jzatt hinzugefügt und es in meine Datei footer.php eingefügt, die auf das Ereignis KEYDOWN wartet. Wenn ausgelöst, werden die angegebenen Links WP abgerufen und die URL der Seite geändert.

Dies ist das jQuery-Skript:

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

Was ich jedoch hinzufügen muss, ist eine IF-Anweisung, um zunächst zu überprüfen, ob sich der Benutzer tatsächlich auf einer Anlageseite befindet.