Categories
jQuery Wordpress

Piecemaker 2 sans plugin avec WordPress


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:
[fusion_builder_container hundred_percent=”yes” overflow=”visible”][fusion_builder_row][fusion_builder_column type=”1_1″ background_position=”left top” background_color=”” border_size=”” border_color=”” border_style=”solid” spacing=”yes” background_image=”” background_repeat=”no-repeat” padding=”” margin_top=”0px” margin_bottom=”0px” class=”” id=”” animation_type=”” animation_speed=”0.3″ animation_direction=”left” hide_on_mobile=”no” center_content=”no” min_height=”none”]

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
[/fusion_builder_column][fusion_builder_column type=”1_1″ background_position=”left top” background_color=”” border_size=”” border_color=”” border_style=”solid” spacing=”yes” background_image=”” background_repeat=”no-repeat” padding=”” margin_top=”0px” margin_bottom=”0px” class=”” id=”” animation_type=”” animation_speed=”0.3″ animation_direction=”left” hide_on_mobile=”no” center_content=”no” min_height=”none”]

// 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:
[/fusion_builder_column][fusion_builder_column type=”1_1″ background_position=”left top” background_color=”” border_size=”” border_color=”” border_style=”solid” spacing=”yes” background_image=”” background_repeat=”no-repeat” padding=”” margin_top=”0px” margin_bottom=”0px” class=”” id=”” animation_type=”” animation_speed=”0.3″ animation_direction=”left” hide_on_mobile=”no” center_content=”no” min_height=”none”]

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

[/fusion_builder_column][/fusion_builder_row][/fusion_builder_container]

2 replies on “Piecemaker 2 sans plugin avec WordPress”

Bonjour,
pour info il manque un paramètre dans le fichier piece.js, vous devez mettre le code ci-dessous sinon cela ne fonctionnera pas (en tout cas pas chez moi !) :

params.base = “http://monsite.com/wp-content/themes/…/piecemaker/piecemaker.swf”;

@+

Leave a Reply

Your email address will not be published. Required fields are marked *