Arrow keys navigation to photo pages with jquery

Question

I'm trying to add arrow key right and left to navigate to photo pages. And each photo page is got navigation section like the one below. Once I press the key, it goes to none stop action forwarding to next page(s). Can anyone help me please. Thanks in advance.

<div style="margin: 10px auto 0 auto; text-align: center; width: 650px;">
<div class="nav_section" id="navigation">

<ul>

<li> <a href="/photos/view/120"><img src="/photos/square/120-df1dppn7253nge2e929k.jpg"></a> </li>

<li> <a href="/photos/view/118"><img src="/photos/square/118-dmfpm8xtzdg3kb2k85b8.jpg"></a> </li>

<li> <a href="/photos/view/116"><img src="/photos/square/116-kfaga5w36gbhej7g641c.jpg"></a> </li>

... and so on,.... 

</ul>

</div>
</div>

and here is rubbish script I have got:

<script type="text/javascript">
$(document).ready(function() {
    $(document).keyup(function(event) {
        var key = event.which;
        if(key == 37) { // Left arrow key
$('a').trigger('click');
}
if(key == 39) { //Right arrow key
        $('a').trigger('click');
}
});
});
</script>

Answer 1

It looks like you're clicking every single anchor on the page $('a') . You probably need to change your selector there.

Without more context I can't guide you on what to do -- but you need to figure out the active picture and I assume trigger a click on it (or some navigation element) depending on how your stuff works.

Answer 2

thank you guys,... the problem is solved,... I just add a class to photo links prevP and nextP

and here is the correct script if anyone needs it:

<script type="text/javascript">
$(document).ready(function() {
    $(document).keyup(function(event) {
        var key = event.which;
        if(key == 37) { // Left arrow key
            $('a.prevP').trigger('click');
        }
        if(key == 39) { //Right arrow key
            $('a.nextP').trigger('click');
        }
    });
});
</script>   

Answer 3

There must be trouble with your click event for your links. It might be a good idea to just make a function responsible for doing whatever action (back/forward), then call that whenever you need it.