How to add arrow key navigation in addition to existing navigation on website code (similar to picture navigation on facebook)

Question

Possible Duplicate:
jQuery Event Keypress: Which key was pressed?

I am trying to add arrow key navigation to my website code and having some problems. I don't think this can be done with html..maybe javascript... I'm pretty new to writing code and a little lost here as i don't know how much this type of navigation is supported. I'd just like to be able to scroll through the pictures within my website (http://www.williameadon.com) in the same way that you can navigate through pictures on facebook and other blogs. I already have two types of navigation,.. one where you simply click on screen on the left, right, index icons and the second where you can click directly on the image to advance. I'd like to have all three options for easier use. I'd really appreciate the help. Thank you.

Here is an example of the code that I am trying to enhance.

<html>

    <title>AWE MAGAZINE - "SHE HAS EYES IN THE BACK OF YOUR HEAD"</title>
    <meta name="keywords" content="art wednesday, Rebecca Dayan, James Penfold, Max Bergius, Annabel Tollman, Sloane Sera, Eric Hauck, Tracy Alfajora, Manny Norena, Zach Vella, Bumble & Bumble, Nars Cosmetics, william eadon"/>

    <body bgcolor="#FFFFFF" alink="#000000" vlink="#000000" link="#000000">
        <table border="0" cellpadding="0" cellspacing="0" width="1095" bgcolor="white" height="0" align="left">
            <tr height="10" bgcolor="#FFFFFF">
                <td bgcolor="#FFFFFF" valign="top" align="left" width="20" height="10">&nbsp;</td>
                <td valign="top" align="left" nowrap bgcolor="#FFFFFF" width="1067" height="10">
                    <p>&nbsp;</p>
                </td>
                <td height="10" bgcolor="#FFFFFF"><font color="#f5f5f5">&nbsp;&nbsp;</font></td>
            </tr>
            <tr valign="top" align="left" height="500" bgcolor="#FFFFFF">
                <td width="20" bgcolor="#FFFFFF" height="500">&nbsp;</td>
                <td valign="top" align="left" width="700" height="500" bgcolor="#FFFFFF">
                    <font color="#000000" face="Times New Roman,Georgia,Times" size="2"><b><a href="http://www.williameadon.com">Index</a> &nbsp;&nbsp; &#60; &nbsp; <a href="awe2.html">&#62;</a> </b></font></p>
                    <p></p>
                    <p></p>
                    <p></p>




                    <p><a href="awe2.html"><img src="awe01.jpg" alt="" width="462" height="693" border="0">

                    </p>
                </td>
            </tr>
            <tr height="50" bgcolor="#FFFFFF">
                <td width="20" bgcolor="#FFFFFF" height="50"></td>
                <td width="1067" height="50" bgcolor="#FFFFFF">
                    <p></p>
                    <p></p>
                    <p></p>
                    <p></p>
                    <p></p>
                    <p></p>
                </td>
                <td bgcolor="#FFFFFF" height="50">&nbsp;</td>
            </tr>
        </table>
        <p></p>


        <script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
try {
var pageTracker = _gat._getTracker("UA-12830353-1");
pageTracker._trackPageview();
} catch(err) {}</script>




    </body>

</html>

This question has been asked before - to track keyboard events you'll need to look for Javascript `keyup` or `keydown` events, take a look at [this example](http://stackoverflow.com/questions/302122/jquery-event-keypress-which-key-was-pressed) for more details. — acconrad, Apr 24 '12 at 02:34

score 0 · Answer 1 · answered Apr 24 '12 at 02:38

One approach would be to use a pre-made "gallery" plugin, such as one of these: http://designmodo.com/jquery-image-sliders/

Or, if you want to work with what you have, and just listen for the key presses, you can use jQuery: http://jquery.com/

and then do something like:

$(function() {
    $("body").keyup(function(ev) {
        if (ev.which==37) $(".left-link").click();
        if (ev.which==39) $(".right-link").click();
    });
});

This is assuming that you have things like:

<a href="awe2.html" class="right-link"><img src="next.jpg"></a>

Explanation: it listens for key presses, and checks the "code" for which button was pressed; 37 is the left arrow key, and 39 is the right arrow key. If it's one of these, it simulates a "click" on the corresponding link.

Hi Jamalex, Thanks for u'r help, but still don't really understand... I'm not really familiar with how jquery works at all. I'm not really a developer, but an artist who happened to figure out just enough code to write my website. This was not easy for me... It would really help me if you could be more specific regarding how to add this into the code of my current website. I could show you the following page of html if that helps? — rodyaraskolnikov, Apr 28 '12 at 21:03

How to add arrow key navigation in addition to existing navigation on website code (similar to picture navigation on facebook)

1 Answers1