how to use Javascript onKeyDown to control gallery - right and left arrows
<p>Please look at <a href="http://steven.tlvweb.com" rel="nofollow">steven.tlvweb.com</a></p>

<p>I want to implement it so the left and right keyboard arrows control the flow.</p>

<p>Currently the scroll wheel works and is set up in the constructor as follows:</p>

<pre><code>/*  ImageFlow Constructor */    

    /* add mouse wheel events ==== */
    if (window.addEventListener)
        this.oc.addEventListener('DOMMouseScroll', function(e) {
            if (e.preventDefault) e.preventDefault();
            this.parent.scroll(-e.detail);
            return false;
        }, false);

    this.oc.onmousewheel = function () {
        this.parent.scroll(event.wheelDelta);
        return false;
    }
</code></pre>

<p>And in the imageflow.prototype further down the code is:</p>

<pre><code>    /* ==== mousewheel scrolling ==== */
    scroll : function (sc) {
        if (sc &lt; 0) {
            if (this.view &lt; this.NF - 1) this.calc(1);
        } else {
            if (this.view &gt; 0) this.calc(-1);
        }
    },
</code></pre>

<p>So, I wrote some code for the constructor:</p>

<pre><code>this.oc.onkeydown=function(){
        this.parent.keypress(event.keyCode);
        return false;
    }
</code></pre>

<p>and in the imageflow.prototype I included:</p>

<pre><code>    /* ==== arrow keys ==== */
    keypress : function(kp) {   
        switch (kp) {

        case 39:                        //right Key
        if (this.view &lt; this.NF - 1) {  //if not at far right of gallery
                    this.calc(1);       //move gallery left
        break;
                    }

                    case 37:            //left Key
        if (this.view &gt; 0) {            //if not at far left of gallery
                    this.calc(-1);      //move gallery left
        break; 
                    } 

        }
    },  
</code></pre>

<p>NB Actually there is currently code in the imageflow constructor but it doesn't work (removing it all together even has no effect):</p>

<pre><code>    /* ==== right arrow ==== */
    this.arR.onclick = this.arR.ondblclick = function () {
        if (this.parent.view &lt; this.parent.NF - 1)
            this.parent.calc(1);
    }
    /* ==== Left arrow ==== */
    this.arL.onclick = this.arL.ondblclick = function () {
        if (this.parent.view &gt; 0)
            this.parent.calc(-1);
    }
</code></pre>

<p>I reckon I am missing something relatively fundamental.</p>
