MooTools Wall Plugin

By  on  
MooTools Wall

One of the more impressive MooTools plugins to hit the Forge recently was The Wall by Marco Dell'Anna.  The Wall creates an endless grid of elements which can be grabbed and dragged, fading in elements as they are encountered.  Let me show you a quick usage of the Wall!

The HTML

There are two elements in the setup: a viewport and a wall holder:

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

Easy enough.

The CSS

The CSS must be configured to accommodate your wall.  Your viewport's height and width properties should be multiples of your block heights.  You don't have to configure the viewport that way, but it you wall will be more visually appealing.

#viewport		{ border:1px solid #ccc; width:450px; height:450px; position:relative; overflow:hidden; }
#wall			{ z-index:1; }
#wall img		{ width:150px; height:150px; display:block; float:left; }

My viewport will be 450 x 450, with each element being 150 x 150.

The MooTools JavaScript

It all starts by creating a Wall instance, providing width, height, rangex, and rangey attributes, providing them as the size of the elements (or not):

// When the DOM is ready
window.addEvent("domready", function() {
	
	// Define a few variables, including the number of images and the "current index"
	var numImages = 23, // 24 images, 0 index
		counter = 0;
		
	// Create the Wall
	new Wall("wall", {
		width: 150,
		height: 150,
		rangex: [-150,150],
		rangey: [-150,150],
		callOnUpdate: function(items) {
			// For every item returned...
			items.each(function(item) {
				// Inject a new image, fade it in
				new Element("img", {
					src: (++counter) + ".jpg",
					styles: {
						opacity: 0
					}
				}).inject(item.node).fade(1);
				// Reset to image one if the maxlength is greater than the counter
				if(counter > numImages) counter = 1;
			});
		}
	}).initWall();	
});

The callOnUpdate method is most important, providing an index by which you can inject your new element (in our case, an image).  Once the counter reaches its maximum length, the index is reset, and the wall continues!

Awesome work by Marco.  My example is just the most basic of usages -- visit Marco's website to see the additional options and examples he has provided.  I can see someone using The Wall to generate a very creative, all-encompassing website!

Recent Features

  • By
    Responsive and Infinitely Scalable JS Animations

    Back in late 2012 it was not easy to find open source projects using requestAnimationFrame() - this is the hook that allows Javascript code to synchronize with a web browser's native paint loop. Animations using this method can run at 60 fps and deliver fantastic...

  • By
    Create a CSS Flipping Animation

    CSS animations are a lot of fun; the beauty of them is that through many simple properties, you can create anything from an elegant fade in to a WTF-Pixar-would-be-proud effect. One CSS effect somewhere in between is the CSS flip effect, whereby there's...

Incredible Demos

  • By
    Build a Toggling Announcement Slider Using MooTools 1.2

    A few of my customer have asked for me to create a subtle but dynamic (...I know...) way for them to advertise different specials on their website. Not something that would display on every page, but periodically or only the homepage. Using a trick...

  • By
    Reverse Element Order with CSS Flexbox

    CSS is becoming more and more powerful these days, almost to the point where the order of HTML elements output to the page no longer matters from a display standpoint -- CSS lets you do so much that almost any layout, large or small, is possible.  Semantics...

Discussion

  1. You are all about the dogs and the girls !

    • I’m about the dogs. The girls are about me.

  2. Awesome plugin, will try to think a use for it!

  3. Thanks for the info david.
    Do you know how much (small) images should we provide to feed the plugin?
    My plan is to use ony (big) one.
    Is that possible?

    • Probably. Instead of using images, you could use DIVs with a background image sprite.

  4. I really do like this effect. Very cool.

    I don’t suppose anyone could explain how to incorporate non-sequentially numbers image filenames, could they? It would so awesome to be able to feed in a list of filenames.

    Any pointers? I just can’t seem to wrap my head around it.

    • Aicke Schulz

      To use a list of filenames, I would fill an array with the names (including the extension to be flexible) and use the counter variable as the index.

      var images = new Array(‘foo.jpg’, ‘bar.png’);

      then in callOnUpdate() replace:

      src: (++counter) + “.jpg”,

      if(counter > numImages) counter = 1;

      with:

      src: images[++counter],

      if(counter > images.length) counter = 1;

  5. thomas666

    Sorry, for this stupid question!

    there is something that i don´t understand. where i store my picture or where is the path to it in your script?

    • Sascha

      Yeah, I’d like to know as well since a have very little knowledge of js.
      Any help appreciated.
      Thanks

  6. I love the dog with glasses xDDDDD :D

    and good tut. thanks david!! :D

  7. Gary

    i love this script but i’ve been trying to figure a way to incorporate a lightbox with the images and have fallen on my face. i know just enough js to tweak variables but this is over my head. can someone point me to a good example of this. the one Marco has is beyond me. or a freelancer to do it for a niminal fee?
    thanks.

  8. Hy David

    Can you help me?
    How can I add divs with text, links, etc.? It would be interesting to feed in content from a html(instead of a folder)(with a mixture of contents, video, image, text, etc.), and then maybe add a clickable function to cells. I am trying to make something like Isotope-jQuery. How can I scroll instead of drag?
    Thank you, ind advance.

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!