0

I want to add the ability for visitors to navigate between photo pages using their left and right arrow keys with cross-browser compatibility.

My existing HTML already has Back and Next links. What do I need to do to get the left key to trigger <%=previousLink%> and right key to trigger the <%=nextLink%>?

<div class="full-size-image-nav">
    <%if previousNumber <> 0 then%>
        <div class="previous">
            <p><a href="<%=previousLink%>">Back</a></p>
        </div>
    <%end if%>
    <%if nextNumber <> 0 then%>
        <div class="next">
            <p><a href="<%=nextLink%>">Next</a></p>
        </div>
    <%end if%>
</div>

I have seen jQuery Event Keypress: Which key was pressed?, but don't know how to adapt that to my code. Thank you.

4

1 に答える 1

5

これをチェックしてください、DEMO http://jsfiddle.net/qRqNf/1/

最初に結果フレームをクリックしてから、左右のキーを押してみてください。

$(document).ready(function () {
    $("body").keydown(function(e) {
      if(e.which == 37) { // left     
          $(".previous a").trigger("click");
      }
      else if(e.which == 39) { // right     
          $(".next a").trigger("click");
      }
    });
    $(".previous a").on("click",function(){
        // your scripts for previous click here
        window.location = 'http://www.google.com';  
    });
    $(".next a").on("click",function(){
        // your scripts for next click here
        window.location = 'http://sg.yahoo.com/';   
    });
});
于 2013-07-08T01:54:14.147 に答える