Jump to content

Problème pour ajouter un effet Kwicks for jQuery


Recommended Posts

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?

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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] )

Share this post


Link to post
Share on other sites

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 ">

Share this post


Link to post
Share on other sites

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};


Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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 :-(

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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...

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

  • 1 month later...

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...

Important Information

Cookies ensure the smooth running of our services. Using these, you accept the use of cookies. Learn More