Problème pour ajouter un effet Kwicks for jQuery

[mexicanos]

Bonjour à tous,

Je suis en train de réaliser un thème que je vais partager par la suite mais j'ai un petit problème.

Je souhaite rajouter un effet jQuery mais je dois insérer ce code dans le header.tpl

[removed]
       $().ready(function() {
   $('.kwicks').kwicks({
       max: 320,
       spacing: 5,
       duration: 1500,
       easing: 'easeOutBounce'
   });
});    [removed]

Et ce code me retourner une erreur de ce type:

Smarty error: [...]syntax error: unrecognized tag: $('.kwicks').kwicks({ max: 320, spacing: 5, duration: 1500, easing: 'easeOutBounce' (Smarty_Compiler.class.php, line 446) in tools/smarty/Smarty.class.php on line 1095

J'aimerais vraiment pouvoir mettre mon animation pourriez-vous m'aider à résoudre ce problème?

[Peha]

Bonjour,

met ton code javascript dans un fichier action.js, lui même dans un dossier prévu pour les script js
puis insère le dans ton thème entre les balises < head>< /head> du fichier header.tpl comme ceci :
< script type="text/javascript" src="js/action.js">< /script>

et ça devrait marcher.

[mexicanos]

Oui oui pas de soucis j'ai bien tout suivi mais ça ne fonctionne pas.

   < scrypt type="text/javascript">
           $().ready(function() {
   $('.kwicks').kwicks({
       max: 320,
       spacing: 5,
       duration: 1500,
       easing: 'easeOutBounce'
   });
});

< scrypt src="js/jquery-1.2.6.min.js" type="text/javascript "> 
       < scrypt src="js/jquery.easing.1.3.js" type="text/javascript "> 
       < scrypt src="js/jquery.kwicks-1.5.1.pack.js" type="text/javascript "> 

PS: Les espaces et les y c'est pour que vous puissiez le voir (Sinon ça affiche [Removed] )

[Peha]

enleve < scrypt type="text/javascript"> et dans le fichier jquery.kwicks-1.5.1.pack.js

[mexicanos]

Il n'y en a pas.

jquery.kwicks-1.5.1.pack.js

[Peha]

met ton code sans les < scrypt type="text/javascript "> dans un fichier action.js
que tu met avec les autres dans le dossier js

dans header.tpl tu met :
< scrypt src="js/jquery-1.2.6.min.js" type="text/javascript ">
< scrypt src="js/jquery.easing.1.3.js" type="text/javascript ">
< scrypt src="js/jquery.kwicks-1.5.1.pack.js" type="text/javascript ">
< scrypt src="js/action.js" type="text/javascript ">

[mexicanos]

La page s'affiche mais pas le script.

Ca ne peut pas venir d'un conflit avec un autre?

           var baseDir = '{$base_dir}';
           var static_token = '{$static_token}';
           var token = '{$token}';
           var priceDisplayPrecision = {$priceDisplayPrecision*$currency->decimals};

[Atch]

Salut
Si ton script est après la balise </Head> alors vaut mieux utiliser les balises {literal} smarty pour y insérer ton script.

{literal}[removed]
ton script
</ script >{/literal}

V++

Atch

[mexicanos]

Mon script est dans le header.tpl comme ceci:

 

  
  
  
  
           <!-- Center -->

J'ai donc testé en litéral mais le script ne s'affiche toujours pas.

{literal}    
                   $().ready(function() {
   $('.kwicks').kwicks({
       max: 320,
       spacing: 5,
       duration: 1500,
       easing: 'easeOutBounce'
   });
});
{/literal}

Je vois bien les cubes mais aucune animations :-(

[Peha]

as tu un lien à nous donner ?

[mexicanos]

Je travail en local. Par contre voici le lien du script. C'est l'exemple 6 que je voudrais installer

http://www.jeremymartin.name/projects.php?project=kwicks

[lagouache]

script s'écrit avec un "i", pas un "y".

Ah oui, OK j'ai rien dit !

[jolvil]

script s'écrit avec un "i", pas un "y".

la balise script [removed] ne passe pas sur le forum il faut ajouter un blanc < script> ou modifier l'orthographe

[mexicanos]

J'ai tout essayé et rien n'y fait.

J'ai testé sur une page index.html à part pour voir si ça venait pas des fichier .js et dans ce cas sa fonctionne.

Je vais tester en include voir si ça fonctionne.

[Peha]

c'est sûrement un erreur dans l'adresse du fichier script par rapport au thème.
jquery et jquery.easign sont déjà présents dans le header de presta (car déjà utilisés par d'autres effets) donc pas la peine de les rajouter.

< script type="text/javascript" src="{ $base_dir}js/jquery/jquery-1.2.6.pack.js">< /script>

< script type="text/javascript" src="{ $base_dir}js/jquery/jquery.easing.1.3.js">< /script>

ils utilisent { $base_dir} pour cibler la racine du site

peut etre en faisant la même chose :
< script type="text/javascript" src="{ $base_dir}theme/nom_du_theme/js/jquery.kwicks-1.5.1.pack.js">< /script>

je ne vois que ça...

[Atch]

il marche bien ce srcipt ( je viens de la tester sur le 1.2)

1°/ modifier le header.TPL

insérer le code dans la balise <head>

< script src="{$content_dir}themes/prestashop/js/jquery.kwicks-1.5.1.pack.js" type="text/javascript"></ script >

       {literal } < script type="text/javascript">
           $().ready(function() {
               $('.kwicks').kwicks({
                   max : 220,
                   spacing : 5
               });
           });
       < / script >{/ literal }

Attention : Sur la 1.2 $base_dir est remplacé par $content_dir et il y a des espace pour l'affichage sur le forum

ensuite copier pour le test le code suivant après la balises </head> :

></pre>
<ul>

puis enregistrer


Ouvrie global CSS et copié à la fin

.kwicks {
   /* recommended styles for kwicks ul container */
   list-style: none;
   position: relative;
   margin: 0;
   padding: 0;
}
.kwicks li{
   /* these are required, but the values are up to you (must be pixel) */
   width: 125px;
   height: 100px;

   /*do not change these */
   display: block;
   overflow: hidden;
   padding: 0;  /* if you need padding, do so with an inner div (or implement your own box-model hack) */
}
.kwicks.horizontal li {
   /* This is optional and will be disregarded by the script.  However, it should be provided for non-JS enabled browsers. */
   margin-right: 5px; /*Set to same as spacing option. */  
   float: left;
}
.kwicks.vertical  li{
   /* This is optional and will be disregarded by the script.  However, it should be provided for non-JS enabled browsers. */
   margin-bottom: 5px; /*Set to same as spacing option. */ 
}

#kwick_1 {
   background-color: #53b388;
}
#kwick_2 {
   background-color: #5a69a9;
}
#kwick_3 {
   background-color: #c26468;
}
#kwick_4 {
   background-color: #bf7cc7;
}
.kwicks.horizontal #kwick_4 {
   margin-right: none; /* cancel margin on last kiwck (if you set a margin above) */
}
.kwicks.vertical #kwick_4 {
   margin-bottom: none; /* cancel margin on last kiwck (if you set a margin above) */
}

enregistrez et testez...

chez moi ça marche

V++

Atch

[mexicanos]

Bonsoir tout le monde.

Merci de m'aider mais il n'y a rien à faire je n'arrive à rien. Voilà maintenant plus de 3 heures que je bosse à fond sur be problème en débloquant certaines options etc... mais je n'arrive pas à avoir mon animation.

Voici mon fichier header.tpl -> http://tinypaste.com/b43bc

[Hedrad]

Ca fonctionne pour ma part. Par contre, pas moyen d'affecter une couleur ou une image à partir du 5ème élement... Je ne comprends pas pourquoi, quelqu'un a une idée ?