CODEWITHSUNDEEP
wordpressmousetrap
ceylankral
ceylankral

Reputation: 38

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?

Upvotes: 0

Views: 176

Answers (2)

ceylankral
ceylankral

Reputation: 38

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

Upvotes: 0

pr0gramista
pr0gramista

Reputation: 9008

Replace window.location=<?php echo $image->next_image_link ?>; with window.location="<?php echo $image->next_image_link ?>";. Your string declariation is not valid so it can't work.

PHP doesn't echo link with inverted commas.

Edit: Wordpress doesn't print just the URL. It prints link element. So the solution will be

  1. Binding to existing navigation

  2. Using regex to cut off the htmt syntax

    var element = '<?php echo $image->next_image_link ?>'; window.location = element.match(/href="([^"]*)/)[1];

Upvotes: 0

Related Questions