Navigate through the gallery using keyboard arrows

What i am trying to do is navigate through a post gallery using the left and right arrow key.

i am aware the key codes for these are e.keyCode == 37 and e.keyCode == 39

Read More

what will be the best way to tackle this?

I looked into the jQuery keyboard plugin.

Below is my gallery buttons for anyone who is interested

<div id="button-container-bottom">
<?php 
global $page, $pages;
if ($page == count($page)): 
$previous_post = get_previous_post(); 
?>
<div class="previous-gallery-button-container">
  <a href="<?php echo get_permalink( $previous_post->ID ); ?>"><span class="gallery-button meta-item">Previous Gallery</span></a>
</div>
<?php

endif;

wp_link_pages( array( 'before' => '<div style="text-align: center;" class="page-link-next-prev">', 
'after' => '', 'previouspagelink' => '<span class="gallery-button meta-item">Previous post</span>', 'nextpagelink' => '', 
'next_or_number' => 'next' ) ); 
//echo('<div class="numberof"><span style="text-align: center;">'.$page.' of '.count($pages).'</span></div>');

wp_link_pages( array( 'before' => '', 'after' => '</div>', 'previouspagelink' => '', 
'nextpagelink' => '<span class="next-gallery-button meta-item">Next post</span>', 'next_or_number' => 'next' ) ); 

?>


<?php
// If the current page equals the last page
if ($page == count($pages)): 

  $next_post = get_next_post(); 
  // Then spit out the next link
  ?>

<div class="next-gallery-button-container">
  <a href="<?php echo get_permalink( $next_post->ID ); ?>"><span class="next-gallery-button meta-item">Next Gallery</span></a>
</div>

<?php
// End the if statement
endif; ?>
</div>

Now I’m not the best coder in the world but managing okay so far it would be great to allow users to navigate through each post page using their keyboards as well.

EDIT – I aim to use the functionality in each post.The aim is to switch between each page in that particular post however to have a catch to navigate to the next post when on the last page or if on the first page navigate to the previous post.

<script>

jQuery(document).keydown(function(e){

if (e.keyCode == 37) {
// alert( "left pressed" );
window.location = "<?php echo get_permalink( $previous_post->ID ); ?>";
//alert('prev');
return false;
}

if (e.keyCode == 39) {
window.location = "<?php echo get_permalink( $next_post->ID ); ?>";
//alert('next');
return false;

}
});

</script>

Related posts

Leave a Reply

1 comment

  1. Get the previous and next links and add them to javascript.

    php

    <?php
    
       $prev_next_urls = ['prev' => '', 'next' => ''];
    
       $prev_post = get_previous_post();
       if (!empty( $prev_post )){
         $prev_next_urls['prev'] = get_permalink( $prev_post->ID );
         echo '<a href="'. $prev_next_urls['prev'] .'">'. $prev_post->post_title .'</a>';
       }
    
       $next_post = get_next_post();
       if (!empty( $next_post )){
         $prev_next_urls['next'] = get_permalink( $next_post->ID );
         echo '<a href="'. $prev_next_urls['next'] .'">'. $next_post->post_title .'</a>';
       }
    ?>
    

    On keypress we can navigate to previous and next pages if they exist.

    js

    <script>
    window.onkeydown = keydown;
    var next_prev_urls = <?php echo json_encode($prev_next_urls);?>;
    
    function keydown(e) {
      if(e.which === 37 && next_prev_urls['prev']){ // Previous
        window.location.href = next_prev_urls['prev'];
      }else if(e.which === 39 && next_prev_urls['next']){ // Next
        window.location.href = next_prev_urls['next'];
      }
    
    }
    </script>