無盡的牆javascript/mootools

我想在wordpress上使用以下腳本創建無盡可拖的牆：http://wall.plasm.it/。我面臨的問題是，我不知道如何抓住wordpress的帖子，並將它們插入牆上的網格。無盡的牆javascript/mootools

這是初始化牆代碼：

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一個新的，但我認爲這會讓它真的很慢。任何想法，我可以使這項工作？

來源

2014-03-03 Alexandru Carjan

我想你想要做的就是設置一個Wordpress查詢來通過ajax查詢獲取你想要的帖子。這些將會返回到您的物品數組中，而不是您示例中的圖像。

來源

2014-03-07 01:20:01

如果頁面基於標準的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"); 
    } 

});

牆腳本主要用於圖像，而不是爲文本，因爲所有的元件被絕對定位有固定尺寸（除非所述柱在長度上類似，這也可以固定與使用more標籤）。

這個例子在WP 3.8.1上對默認主題進行了測試。爲了工作，你需要enqueue以下腳本：

來源

2014-03-17 00:06:03 Danijel

無盡的牆javascript/mootools

回答

相關問題