Adding keyboard arrow navigation to custom js

Question

I am using wordpress and my content looks like this

<div class="image-wrap"><a class="ajax-load-next" href="http://linktopage.com/2/"><img src="blah1.jpg" alt=""/></a></div><!--nextpage-->
<div class="image-wrap"><a class="ajax-load-next" href="http://linktopage.com/3/"><img src="blahab.jpg" alt=""/></a></div><!--nextpage-->
<div class="image-wrap"><a class="ajax-load-next" href="http://linktopage.com/4/"><img src="blahco.jpg" alt=""/></a></div><!--nextpage-->
<div class="image-wrap"><a class="ajax-load-next" href="http://linktopage.com/5/"><img src="blahneat.jpg" alt=""/></a></div>

I have a custom javascript that loads the next image when the user clicks on the image. Now I want to add left & right keyboard arrow navigation to this script and I don't know how I can I implement to it since I'm not familiar with javascript.

$('body').on('click', '.image-wrap', function(e) { // listen for 'click' on our '.image-wrap' element
  e.preventDefault();  // Prevents default behavior on the a element

  $.ajax({

    url: $(this).find( 'a' ).attr( 'href' ), // the url we are fetching by ajax
    success: function (response) {

      newImg = $(response).find('.image-wrap').html(), // get the new href link and image from the response, contained in div.image-wrap

      $( 'div.image-wrap' ).html( newImg ); // set the new html for our inner div

    }
  }).fail(function (data) {

    if ( window.console && window.console.log ) {

      console.log( data );  // log failure to console

    }

  });

});

EDIT: By pressing the right arrow key I want it to click the ajax link that is inside image-wrap div which should load the next image. If pressing the left arrow key it should go back to the previous image. Any idea how to do this?

Answer 1

You can use mousetrap.

function GoToLocation(url)
  {
    window.location = url;
  }
  Mousetrap.bind("right", function() {
document.getElementById('next-image').click();
  });

<script src="https://craig.global.ssl.fastly.net/js/rainbow-custom.min.js?39e99"></script>
<script src="https://craig.global.ssl.fastly.net/js/mousetrap/mousetrap.js?bc893"></script>

<div class="image-wrap"><a id="next-image" class="ajax-load-next" href="http://linktopage.com/2/"><img src="blah1.jpg" alt=""/></a></div><!--nextpage-->
<div class="image-wrap"><a id="next-image" class="ajax-load-next" href="http://linktopage.com/3/"><img src="blahab.jpg" alt=""/></a></div><!--nextpage-->
<div class="image-wrap"><a id="next-image" class="ajax-load-next" href="http://linktopage.com/4/"><img src="blahco.jpg" alt=""/></a></div><!--nextpage-->
<div class="image-wrap"><a id="next-image" class="ajax-load-next" href="http://linktopage.com/5/"><img src="blahneat.jpg" alt=""/></a></div>

if you are use attachment.php or image.php based gallery. you can also use this : Wordpress Attachment Page Navigate with Keyboard