web-dev-qa-db-ja.com

ギャラリーのショートコードでキーボードで移動する

Wordpress Galleryのショートコードを使用していますが、矢印キーを使用して移動する方法があるかどうか疑問に思いましたか。単一の画像を表示し、右矢印を使用してギャラリーセット内の次の画像に移動する場合と同じです。これを行う方法がありますか？

imagesgallerynavigation
5
Ruriko

Underscores（_s） starterテーマには、このためのキーボードナビゲーションスクリプトが付属しています。私はこれを自分でテストしていません。しかし、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ファイルを見てみることです。

基本的に添付ページに必要なものはクラス "previous-image"/"entry-attachment"を持つ要素内のnext/prev画像へのリンクです。

2
jzatt

私は標準的なWPギャラリーを使用しており、それぞれの画像は画像がフルサイズで表示される添付ページにリンクしています。ユーザーが対応する画像にアクセスするために前のリンクと次のリンクを表示するには、 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>

私のクライアントは自分のキーボードを使ってギャラリーの画像を行き来できるようにしたかったので、私はjzattのjQueryスクリプトを追加し、それを私の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ステートメントです。

1
Christian Scholz-Flöter