Intégration Innerfade animated dans le module éditorial

[kenwolf]

Bonjour,

Comme le titre l'indique je souhaiterai intégrer le innerfade avec jquery dans le module editorial. On donne la marche à suivre sur ce site ( pour une page html classique): http://www.openstudio.fr/Animated-InnerFade-with-JQuery.html#forum97

Mais je voudrais une intégration propre clean dans le module editorial...

Si quelqu'un peut indiquer la marche à suivre ? merci

[Cédric Girard]

Bonjour

Je pense que c'est basé sur le même principe que le plugin Innerfade original (que j'utilise sur le site la Cabane du chasseur dans le module Editorial). Cela se fait en deux étapes :

1°) la mise en place du lien javascript vers le plugin innerfade.jquery.js au niveau du header (j'ai préféré modifier le header.tpl de mon thème, pour cela)

J'y ai donc rajouté le code suivant (pour raisons de facilités le plugin innerfade a été placé sur mon site dans le sous-répertoire /js/jquery/ à la racine)

[removed][removed]

2°) La modification pour intégration du module Editorial (il faut d'une part y placer le code HTML avec les bons styles CSS, et de l'autre, un appel Javascript pour "déclencher" la mise en route du plugin ; personnellement je préfère placer ce code dans un fichier javascript externe)

L'appel javascript dans mon fichier externe ressemble à ça :

$(document).ready(function(){
               $('#bandeau_liste').innerfade({speed: 7000, timeout: 7000, type: 'sequence', containerheight: '200px' }); 
               } );

Il suffit de transposer à ton plugin ;-)


EDIT : le premier code ne passe pas dans le forum >:-(

il s'agit d'un simple appel javascript comme il y a dans le header HTML des pages.

[kenwolf]

Merci pour la réponse rapide ! effectivement en suivant la logique du systeme prestashop j'ai supposé qu'il fallait modifier le header.tpl et l'editorial.tpl, mais serait il possible de voir les codes d'origines et les codes modifiés ( avant et après) pour pouvoir voir comment effectuer les modification très précisément ? j'ai essayé d'intégrer les codes assez grossièrement mais cela ne fonctionne pas...

[Cédric Girard]

Il te suffit de regarder le code dans ma boutique.

Au niveau du header.tpl, il faut uniquement rajouter une ligne comme suit (ndlr : je remplace certains caractères pour qu'elle ne soit pas virée) :

idem dans le module éditorial au niveau de l'appel du fichier javascript. Le reste du code, c'est un HTML classique.

[kenwolf]

Ok pas de soucis je vais tenter ça, encore merci

[fly_in_the_sky]

Bonjour, j'éssaye de mettre au point , un petit diaporamat pour mon module éditorial ...
Mais ça ne fonctionne pas trop ...

J'ai rajouter dans le header les lignes de commande qui dirige vers le plugin ...

J' ai éssayer de mettre l'appel :

[removed]
$(document).ready( function(){
    $('ul#animated-portfolio').animatedinnerfade({ 
           speed: 2000, 
           timeout:  15000, 
           type: 'sequence', 
           containerheight: '300px', 
           containerwidth: '600px', 
           animationSpeed: 15000, 
           animationtype: 'fade',
       bgFrame: 'squelettes/img/frame.png',
       controlBox: 'show',
       controlBoxClass: 'mycontrolboxclass',
       controlButtonsPath: 'squelettes/img',
           displayTitle: 'yes'
     }); 
} ); 
[removed]

dans le header.tpl
mais le site ne fonctionnait plus après ...




Mais dans le module éditorial, je dois inscrire où ? via le back office edito " séction code html ? "
Ou alors il faut travailler via sur le editoral.tpl ?

Et dans cette endroit,

que faut t'il mettre exactement ? :
un appel javascript quel genre ?



Puis
la ligne d'après

>
</pre>
<ul>
  

  

  

Si je ne met pas d'appel, les photos sont affichés les unes après les autres .... .. ( c'est déjà ça ...)

[fly_in_the_sky]

J'ai ceci comme erreur lorsque je met l'appelle dans le header.tpl


Fatal error: Smarty error: [in C:\xampp\htdocs\prestashop/themes/prestashop/header.tpl line 37]: syntax error: unrecognized tag: $('#news').innerfade({ animationtype: 'slide', speed: 750, timeout: 2000, type: 'random', containerheight: '1em' (Smarty_Compiler.class.php, line 446) in C:\xampp\htdocs\prestashop\tools\smarty\Smarty.class.php on line 1095

[Cédric Girard]

Bonjour

On ne peut pas intégrer de javascript dans un tpl utilisant les accolades. Il faut l'externaliser dans un fichier .js (qui ne posera aucun problème car exécuté au niveau du navigateur et non du serveur)

[fly_in_the_sky]

Bonjour

On ne peut pas intégrer de javascript dans un tpl utilisant les accolades. Il faut l'externaliser dans un fichier .js (qui ne posera aucun problème car exécuté au niveau du navigateur et non du serveur)

Merçi pour ta réponse , ...
Comment fais je pour appeller le fichier ?
Et le fichier .js je le crée avec un blox note et je colles quel code dedans ?
Déso ... je me casse la tête depuis une semaine pour mettre un diaporamat .. et j'y arrive pas , ni e flash, ni avec java ...

[Cédric Girard]

De la même manière que tous les fichiers Javascript utilisés au niveau de la boutique (voir dans la balise HEAD de ton site ;-) )

Une solution est de placer le fichier javascript avec tous les autres fichiers JQuery, dans /js/JQuery (de mémoire - c'est depuis la racine de la boutique) puis d'appeler ton fichier à cet endroit.

[fly_in_the_sky]

Donc dans le body de mon editorial.tpl , je met cette ligne :

Et je crée un nouveau fichier MONFICHIER.js dans lequel je colle :

[removed]
$(document).ready( function(){
    $('ul#animated-portfolio').animatedinnerfade({ 
           speed: 2000, 
           timeout:  15000, 
           type: 'sequence', 
           containerheight: '300px', 
           containerwidth: '600px', 
           animationSpeed: 15000, 
           animationtype: 'fade',
       bgFrame: 'squelettes/img/frame.png',
       controlBox: 'show',
       controlBoxClass: 'mycontrolboxclass',
       controlButtonsPath: 'squelettes/img',
           displayTitle: 'yes'
     }); 
} ); 
[removed] 

Et puis dans le fichier editoral.tpl je colle :

></pre>
<ul>
  

  

   

Ca parait juste ?