web-dev-qa-db-fra.com

Naviguer avec le clavier dans le shortcode de la galerie

J'utilise Wordcode Gallery shortcode et je me demandais s'il y avait un moyen de naviguer en utilisant les touches de direction? Comme si je visionnais une seule image et utilisais la flèche droite pour naviguer vers la prochaine image du jeu de galeries. Une idée comment faire ça?

imagesgallerynavigation
5
Ruriko

Le thème Underscores (_s) starter est accompagné d’un script de navigation au clavier. Je n'ai cependant pas testé cela moi-même. Mais le fichier JS ressemble à ceci:

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

Il faut également apporter quelques modifications à votre fichier de thème de pièce jointe pour que les liens fonctionnent correctement. Je vous suggère de télécharger le thème _s et de regarder dans le fichier image.php.

Fondamentalement, ce dont vous avez besoin sur la page de pièce jointe est un lien vers l'image suivante/précédente dans un élément de classe "image précédente"/"entry-attachment".

2
jzatt

J'utilise les galeries WP standard et chaque image est liée à une page de pièce jointe sur laquelle l'image est affichée à sa taille réelle. Pour afficher les liens PREVIOUS et NEXT afin que l'utilisateur puisse accéder aux images correspondantes, j'ai trouvé les fonctions previous_image_link et next_image_link utile.

Dans mon attachment.php j'ai les lignes suivantes pour que WordPress affiche les liens précédents/suivants:

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

Cela donne un balisage qui pourrait ressembler à:

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

Mon client souhaitait pouvoir utiliser son clavier pour passer d'une image à l'autre de la galerie. J'ai donc ajouté le script jQuery de jzatt et l'ai modifié sur mon footer.php qui écoute le KEYDOWN. event et, s’il est déclenché, récupère les liens WP fournis et modifie l’URL de la page.

C'est le script 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>

Ce que j’ai besoin d’ajouter, c’est une instruction IF pour vérifier d’abord si l’utilisateur est bien sur une page de pièce jointe.

1
Christian Scholz-Flöter