J'essaie de créer un mur déplaçable sans fin sur wordpress en utilisant ce script: http://wall.plasm.it/ . Le problème auquel je suis confronté est que je ne sais pas comment saisir des messages wordpress et les insérer dans la grille murale.
C'est le code qui initialise le mur:
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();
});
Je devrais trouver un moyen de créer un "nouvel élément", de récupérer un article wordpress déjà existant ou d'en ajouter un nouveau en utilisant ajax, bien que je pense que cela le rendrait vraiment lent. Des idées sur la façon dont je pourrais faire fonctionner cela?
Réponses:
0 pour la réponse № 1Je pense que ce que vous voulez faire est de configurer une requête Wordpress pour obtenir les messages que vous souhaitez via une requête ajax. Ceux-ci seraient retournés dans votre tableau d'éléments au lieu des images de votre exemple.
0 pour la réponse № 2
Si la page est basée sur un Wordpress standardstructure Je ne vois aucun avantage à utiliser AJAX ici. Le moyen le plus simple serait de saisir les poteaux et de les placer à l'intérieur du mur. Donc, ce script, dans le cas de plusieurs articles, crée des éléments html du mur, définit le CSS de base, prend les articles et les place à l'intérieur du mur. Est basé sur ce Exemple.
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" );
}
});
Le script Wall est principalement destiné aux images,et pas pour le texte, car tous les éléments sont absolument positionnés avec des dimensions fixes (à moins que les messages soient de longueur similaire, qui peuvent également être fixés à l'aide de plus étiquette).
L'exemple est testé avec WP 3.8.1, sur les thèmes par défaut. Pour travailler, vous devez mettre en file d'attente les scripts suivants: