wordpressmousetrap

Wordpress Attachment Page Navigate with Keyboard


I'm using WordPress.

I want to navigate my attachment page with left and right key.

Here is my codes, but not working;

function GoToLocation(url)
  {
    window.location = url;
  }

  Mousetrap.bind("j", function() {
    //alert('j pressed' + document.getElementById("next").href);
    //document.getElementById("next").click();
    window.location=<?php echo $image->next_image_link ?>;
  });
<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>

If I change that

window.location=<?php echo $image->next_image_link ?>;

to this

window.location="http://mylink.com";

script working well. but I can't use WordPress based link (like next_image_link();)

What can I do?


Solution

  • i did myself,

    firstly add this to top

    <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>
    Then add this script too

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

    lastly, put "next-page" , "prev-page" ID to the location of the link tag for example;

    <a id="next-page"></a>
    

    or

    <a id="prev-page"></a>
    

    So, when you press Left or Right keyboard button, script will work well. See ya