Skip to content
This repository

A Javascript plugin for Mootools

branch: master

Bug fixes

Bug fixes.
Added events for mobile coda item.
Added recalculation of the size of the viewport window resize.
latest commit e440dc6010
m.dellanna authored August 20, 2012
Octocat-spinner-32 Demos Aggiornamento permessi January 03, 2012
Octocat-spinner-32 Source Bug fixes August 20, 2012
Octocat-spinner-32 README.md Fix counter file readme September 01, 2011
Octocat-spinner-32 logotipo.png Demo August 01, 2011
Octocat-spinner-32 package.yml Demo August 01, 2011
README.md

Screenshot

The Wall - A Javascript plugin for Mootools

The Wall is a plugin for Mootools javascript framework designed to create walls of infinite dimensions. Its flexibility allows different applications, from infinite wall mode to Coda slider mode. The Wall creates compatible interfaces with the newer browsers and iPhone and iPad mobile devices.

Urls The Wall

The trailer: Trailer

Project site: wall.plasm.it

My portfolio: www.plasm.it

How to use

Snippet code Javascript:

#JS

// Define The Wall
var maxLength = 100; // Max Number images or array length
var counter   = 1;
var wall = new Wall("wall", {
                "width":150,
                "height":150,
                "rangex":[-100,100],
                "rangey":[-100,100],
                callOnUpdate: function(items){
                    items.each(function(e, i){
                        // This is example code
                        var a = new Element("img[src=/your/folder/images/"+counter+".jpg]");
                            a.inject(e.node).fade("hide").fade("in");
                        counter++;
                        // Reset counter
                        if( counter > maxLength ) counter = 1;
                    })
                }
            });
// Init Wall
wall.initWall();

Snippet code HTML:

#HTML

<!-- Viewport and Wall -->
<div id="viewport">
    <div id="wall"></div>
</div>
<!-- END Viewport and Wall -->

Snippet code CSS:

#CSS

/* Minimal Css Required */
#viewport{
    width:900px;
    height:450px;
    position:relative;
    overflow:hidden;
    margin:0 auto;
    background:#111111  ;
}

#wall{
    z-index:1;
}
Something went wrong with that request. Please try again.