Question

I’m using the mootools wall plugin, Its working well in my application, however if I add multiple (image) walls it only works for one wall ::: My understanding of scripting is not good enough to add a each function or similar :::
I need to “bind” the code below to say 2 divs like this :::

My First wall:

<div id="viewport">
<div id="wall">

Second wall:

<div id="viewport">
<div id="wall_02">

Any assistance would be appreciated.

var wallIMAGES = new Wall( "wall", {

                    "width": scArray[1],
                    "height": scArray[1],

                    callOnUpdate: function(items){
                        items.each(function(e, i){
                            var el = wall[counterFluid];
                            if (el) {
                                var a = new Element("img[width="+scArray[1]+"][height="+scArray[1]+"][src={thumb}]".substitute(el));
                                    a.inject(e.node).set("opacity", 0).fade("in");
                                    e.node.store("tubeObject", el);
                            }
                            counterFluid++;
                            // Reset counter
                            if( counterFluid >= scArray[10].length) counterFluid = 0;
                        })
                    }

    });
        wallIMAGES.initWall();

Answer 1

Maybe something like this:

var my_wall_ids = ['wall', 'wall_02'];
var myWalls = [];
var baseWallOptions = {
        "width": scArray[1],
        "height": scArray[1],
        callOnUpdate: function(items){
            items.each(function(e, i){
                var el = wall[counterFluid];
                if (el) {
                    var a = new Element("img[width="+scArray[1]+"][height="+scArray[1]+"][src={thumb}]".substitute(el));
                    a.inject(e.node).set("opacity", 0).fade("in");
                    e.node.store("tubeObject", el);
                }
                counterFluid++;
                // Reset counter
                if( counterFluid >= scArray[10].length) {counterFluid = 0;}
            }); // end items.each
        }
}
for (var i=0;i<my_wall_ids.length;i++){
    var id = my_wall_ids[i];
    var wallOptions = baseWallOptions;
    // if your customization was something like changing
    // the height , but only on the 'wall' element
    if (id === 'wall') {
        wallOptions.height = 400;
    }
    myWalls[i] = new Wall(id, wallOptions);
    myWalls[i].initWall();
}