Modularweb vient de sortir la nouvelle version de son slider 3D. Piecemaker 2 est distribué sous licence Open Source ce qui nous laisse le droite de le paramétrer à notre convenance.
Il existe un plugin WordPress pour Piecemaker 2 mais nous allons voir ici comment l’utiliser avec WordPress sans utiliser de plugin.

Etape 1:

Télécharger Piecemaker 2.

Etape 2:

Suivez la documentation fournie pour créer votre propre Slider. Les principaux paramètrages se trouvent dans le fichier piecemaker.xml

Si vous personnalisez le slider en insérant vos propres photos, vos descriptions et que vous avez choisi les dimensions pour le conteneur du slider, vous pouvez passer à l’étape suivante.

Etape 3:

1. Envoyer vos photos sur le serveur.
2. Mettre à jour le fichier piecemaker.xml afin qu’il trouve bien vos photos.
3. Créer un fichier piece.js avec le code suivant:

var flashvars = {};
flashvars.cssSource = "http://monsite.com/wp-content/.../piecemaker.css"; // Mettre à jour les liens
flashvars.xmlSource = "http://monsite.com/wp-content/.../piecemaker.xml"; // Mettre à jour les liens</code>

var params = {};
params.play = "true";
params.menu = "false";
params.scale = "showall";
params.wmode = "transparent";
params.allowfullscreen = "true";
params.allowscriptaccess = "always";
params.allownetworking = "all";

swfobject.embedSWF('http://monsite.com/wp-content/.../piecemaker.swf', 'yourpiecemaker', '1000', '600', '10', null, flashvars,
params, null); // Mettre à jour les liens

4.Charger les fichiers piece.js et sfwobject.js en éditant le fichier function.php

// Charger ses propres Scripts
function load_scripts() { //creates a function to call javascript files
if (!is_admin()) { //Load Script but not on admin pages.
// wp_enqueue_script('jquery');
wp_enqueue_script('swfobject', '/wp-content/themes/thematic/js/swfobject.js'); //Loads js file
wp_enqueue_script('piece', '/wp-content/themes/thematic/js/piece.js'); //Loads js file
}
}
add_action('init', 'load_scripts'); //load the function

Etape 4:

Dans un nouvel article ou page copier/coller ce code:

<div id="yourpiecemaker">
</div>