Trying to add Keyboard Nav to this MooTools script…Please Help

[Rugg]

Here is my script thus far

window.addEvent("domready", function(){

var maxLength    = 100;

var counterFluid = 1;

var wall = new Wall("wall", {

"draggable":true,

"autoposition":true,

"inertia":true,

"width":150,

"height":150,

"preload":true,

"rangex":[-6,6],

"rangey":[-6,6],

callOnUpdate: function(items){

items.each(function(e, i){

var a = new Element("img[src=/path/your/images/"+counterFluid+".jpg]");

a.inject(e.node);

counterFluid++;

// Azzera counter

if( counterFluid > maxLength ) counterFluid = 1;

})

}

});

// Init Fluid Wall

wall.initWall();



// Behaviors

$("mv-top").addEvent("click", function(e){

e.stop();

wall.moveTo(wall.getCoordinatesFromId(wall.getActiveItem()).c, -6);

}.bind( this ))



$("mv-bottom").addEvent("click", function(e){

e.stop();

wall.moveTo(wall.getCoordinatesFromId(wall.getActiveItem()).c, 5);

}.bind( this ))



$("mv-left").addEvent("click", function(e){

e.stop();

wall.moveTo(-6,wall.getCoordinatesFromId(wall.getActiveItem()).r);

}.bind( this ))



$("mv-right").addEvent("click", function(e){

e.stop();

wall.moveTo(5,wall.getCoordinatesFromId(wall.getActiveItem()).r);

}.bind( this ))



$("mv-center").addEvent("click", function(e){

e.stop();

wall.moveTo(0,0);

}.bind( this ))

});

I would like to add keyboard navigation to this, but not having luck. A colleague suggests to use the snippet below, however I’m a bit confused on how to integrate it. Any help is greatly appreciated!

Suggested Keyboard Nav Script

if (event.key == 'up') {

var cc = this.mywall.getCoordinatesFromId(this.mywall.getActiveItem());

if( $$("a[rel=" + cc.c + "x" + ((cc.r)-1) + "]").length > 0 ){

$$("a[rel=" + cc.c + "x" + ((cc.r)-1) + "]").fireEvent("click")

this.mywall.moveTo(cc.c , ((cc.r)-1) )

}

}

[Author]

Posts