在库中使用键盘导航快捷码

时间：2012-10-22 作者：Ruriko

我正在使用Wordpress Gallery快捷码，我想知道是否有办法使用箭头键导航？就像我查看单个图像并使用右箭头导航到库集中的下一个图像一样。你知道怎么做吗？

2 个回复
最合适的回答,由SO网友:jzatt 整理而成

这个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;
        }
    } );
} );
它还需要对附件主题文件进行一些修改，以使链接正常工作。我建议您下载\\u主题并查看image.php 文件

基本上，附件页面上需要的是指向类为“previous image”/“entry attachment”的元素中的下一个/上一个图像的链接。

SO网友:Christian Scholz-Flöter

我使用的是标准的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语句，以首先检查用户是否确实在附件页上。

结束
标签： images   gallery   navigation   小码农  

相关推荐

Images in wp_mail not showing

我创建了一个发送电子邮件的插件：$subject = \'New comment - \'.$post_title; ob_start(); include(SUBSCRIBE_USER_BASE_DIR . \'/email/message.php\'); $message = ob_get_clean(); foreach($user_emails as $user_email){ $to = $user