Ok, The Wall moves, repositions, makes everything by itself... but what if I want to move it to a particular coordinate? This tutorial shows how to make it.
Setting remains the one you have defined, you just need a few lines of JavaScript to instruct The Wall and move it to the coordinate you want.
Snippet code Css
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 ))