Endless wall javascript/mootools

2 Views

I am trying to create and endless draggable wall on wordpress using this script: http://wall.plasm.it/ .
The problem I am facing, is that I don’t know how could I grab wordpress posts, and insert them into the wall grid.

This is the code that initialises the wall:

Read More
window.addEvent("domready", function(){
  // Define The Wall
                    var maxLength    = 100; // Max Number images
                    var counterFluid = 1;
                    var wallFluid = new Wall("wall", {
                                    "draggable":true,
                                    "inertia":true,
                                    "width":150,
                                    "height":150,
                                    "rangex":[-100,100],
                                    "rangey":[-100,100],
                                    callOnUpdate: function(items){
                                        items.each(function(e, i){
                                            var a = new Element("img[src=/your/folder/images/"+counterFluid+".jpg]");
                                                a.inject(e.node).fade("hide").fade("in");
                                            counterFluid++;
                                            // Reset counter
                                            if( counterFluid > maxLength ) counterFluid = 1;
                                        })
                                    }
                                });
                    // Init Fluid Wall
                    wallFluid.initWall();
});

I should find a way to make ‘new Element’, grab an already existing wordpress post, or add a new one using ajax, although I think this would make it really slow. Any ideas how I could make this work?

Post Views: 2

Related posts

Leave a Reply

2 comments

  1. I think what you want to do is setup a WordPress Query to get the posts you want via an ajax query. These would be returned into your items array instead of the images in your example.

  2. If the page is based on a standard WordPress structure I do not see any benefit from using AJAX here. The easiest way would be to grab the posts and place them inside the wall. So this script, in the case of more than one post, creates html elements of the wall, sets the basic css, takes the posts and places them inside the wall. Is based on this example.

    window.addEvent( "domready", function() {

    if ( $$( '.post' ).length > 1 ) {
        // create base container for the wall
        new Element( 'div#wall_container' ).setStyles({
            width:      608,
            position:   'relative', 
            margin:     '0 auto'    
        }).inject( $$( '.post' )[0], 'before' );

        // create viewport, wall, and navigation 
        new Element( 'div#viewport' ).setStyles({
            width:      608,
            height:     450,
            position:   'relative',
            overflow:   'hidden',
        }).inject( 'wall_container' );

        new Element( 'div#wall' ).inject( 'viewport' );
        new Element( 'div#wall-list' ).inject( 'viewport', 'after' );

        // collect all posts ( elements with class="post" ) and dispose them
        var posts = $$( '.post' ).dispose();

        new Wall( "wall", {
            "draggable":    true,
            "inertia":      true,
            "autoposition": true,
            "preload":      true,
            "width":        608,
            "height":       450,
            "rangex":       [ 0, posts.length ],    // use number of posts for number of items in the wall
            "rangey":       [ 0, 1 ],               // only one line
            callOnUpdate: function( items ) {
                items.each( function(e, i) {                
                    posts[e.y].inject(e.node);      // inject posts into wall
                });
            }
        })  .initWall()
            .getListLinksPoints( "wall-list" );
    }

});

    The Wall script is intended primarily for images, and not for text, because all the elements are absolutely positioned with fixed dimensions (unless the posts are similar in length, which can be also fixed with the use of more tag).

    The examle is tested with WP 3.8.1, on the default themes. In order to work you need to enqueue the following scripts: