Trying to add keyboard navigation

[auntnini]

1) Script Title: Continuous Reel Slideshow

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex14/reelslideshow.htm

3) Describe problem:
At http://pauladamdavis.com/blog/2011/05/add-keyboard-navigation-to-slide-shows/
found this

$(document).keydown(function(e){ if (e.keyCode == 37 || e.keyCode == 38) { // Left or up keys $("#prevLink").click(); } if (e.keyCode == 39 || e.keyCode == 40) { // Right or down keys $("#nextLink").click(); } });


And was trying to add it to DD's Continuous Reel slideshow http://www.dynamicdrive.com/dynamicindex14/reelslideshow.htm. Could keyboard navigation be added here? Or where?



navigate:function(keyword){ //keyword: "back" or "forth"
clearTimeout(this.rotatetimer)

var dir=(keyword=="back")? (this.setting.orientation=="h"? "right" : "down") : (this.setting.orientation=="h"? "left" : "up")
var targetslide=(keyword=="back")? this.curslide-1 : this.curslide+1

targetslide=(targetslide<0)? this.$imageslides.length-1 : (targetslide>this.$imageslides.length-1)? 0 : targetslide //wrap around

if (this.animation_isrunning==false)

this.slide(targetslide, dir)
},

[jscheuer1]

You don't need to edit the navigate function, rather you can use it. Once you declare like so:


<script type="text/javascript">

var firstreel=new reelslideshow({
wrapperid: "myreel", //ID of blank DIV on page to house Slideshow
dimensions: [300, 200], //width/height of gallery in pixels. Should reflect dimensions of largest image
imagearray: [
["http://i26.tinypic.com/11l7ls0.jpg"], //["image_path", "optional_link", "optional_target"]
["http://i29.tinypic.com/xp3hns.jpg", "http://en.wikipedia.org/wiki/Cave", "_new"],
["http://i30.tinypic.com/531q3n.jpg"],
["http://i31.tinypic.com/119w28m.jpg"] //<--no trailing comma after very last image element!
],
displaymode: {type:'auto', pause:2000, cycles:2, pauseonmouseover:true},
orientation: "h", //Valid values: "h" or "v"
persist: true, //remember last viewed slide and recall within same session?
slideduration: 300 //transition duration (milliseconds)
})

</script>

the var firstreel now holds the instance. So you can do:


jQuery(document).keydown(function(e){
if (e.keyCode == 37) {
firstreel.navigate('back')
} if (e.keyCode == 39) {
firstreel.navigate('forth');
}
});

I'd advise against using the up and down keys (38 and 40) as they control the vertical scrolling of the page. Even the left and right keys are suspect as, if there's a horizontal scrollbar, they control it. So you might want to use keys like n for next and p for previous or in the case of a vertical reel u for up and d for down.

You can override the default actions of the arrow or other keys. But if you do it will probably inconvenience some users, mildly or severely. There are those who would say don't mess with the keyboard at all because some users might need it.

[auntnini]

Yes, that does it.

Thanks also for the advisement re: messing with keyboard navigation. I was trying to make it easier for users by giving an option to mouse CLICK. This was inspired by jQuery FancyBox plug-in demos which used arrow keys. Now I'm thinking that the "box" probably creates a specific or "isolated" environment that would not interfere with normal page navigation.