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) ) } }
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