Question

我正在尝试使用此脚本在wordpress上创建无尽的可拖动墙：http://wall.plasm.it/。我面临的问题是，我不知道如何抓住wordpress帖子，并将它们插入到墙网格中。

这是初始化墙的代码：

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();
});

我应该找到一种方法来制作'新元素'，抓住已经存在的wordpress帖子，或者使用ajax添加一个新帖子，虽然我认为这会让它变得非常慢。我有什么想法可以让它发挥作用吗？

Answer 1

我认为您要做的是设置Wordpress查询以通过ajax查询获取您想要的帖子。这些将返回到您的items数组中，而不是示例中的图像。

Answer 2

如果页面基于标准的Wordpress结构，我认为在这里使用AJAX没有任何好处。最简单的方法是抓住柱子并将它们放在墙内。所以这个脚本，在多个帖子的情况下，创建墙的html元素，设置基本的css，获取帖子并将它们放在墙内。基于this示例。

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" );
    }

});

Wall脚本主要用于图像，而不是文本，因为所有元素都以固定尺寸绝对定位（除非帖子长度相似，也可以使用more修复标记）。

使用WP 3.8.1对默认主题进行测试。为了工作，您需要enqueue以下脚本：

无尽的墙壁javascript / mootools

2 个答案: