Intégration d'un effet jquery pour modidier le module de publicité. [Résolu]

[paulo198851]

Bonjour,
voila je souhaiterais modifier mon module de publicités pour y mettre plusieurs images en diaporama.

J'ai donc modifier mon fichier advertising.tpl

<!-- MODULE Block advertising -->











<!-- /MODULE Block advertising -->

Ensuite j'ai voulu intégrer mes fichiers JS pour ce diaporama en modifiant les fichier header.tpl en y ajoutant ces lignes.

       @script type="text/javascript" src="{$content_dir}js/jquery/jquery.cycle.min.js">@
           @script type="text/javascript" src="{$content_dir}js/jquery/jquery.cycle.all.min.js">@
       @script type="text/javascript" src="{$content_dir}js/jquery/jquery.cycle.var.js">@

@= balise script

Et mon autre problème c'est que lorsque j'ai voulu mettre ces lignes ma page index ne s'affiche plus :
Je n'arrive pas à intégrer ce code:

@
$(document).ready(function() {
   $('.slideshow').cycle({
       fx: 'fade', // choose your transition type, ex: fade, scrollUp, shuffle, etc...
                   speed:   300,
                   timeout: 3000,
                   pause:   1
   });
});
@

@= balise script

Pouvez vous m'aider ?
Merci de votre aide

[AAymeric]

Bonjour,

Si tu es sur Firefox ou Safari ouvre la console d'erreur (Outils > Console d'erreurs ou Développements > Console d'erreurs).
Poste l'erreur que te retourne le navigateur.
Je pense ça vient de l'import des librairies. Essaye de mettre les librairies qui sont en ligne avec une adresse http:// au lieu des adresses local.

http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js
http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.2.72.js
http://malsup.github.com/jquery.easing.1.1.1.js

[paulo198851]

Merci de cette réponse, j'ai tester en utilisant les js directement sur le source c'est à dire sur le site lui même.

<!-- include jQuery library -->
@ type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js">@

<!-- include Cycle plugin -->
@ type="text/javascript" src="http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.2.74.js">@

En fait ce que je n'arrive pas intégrer ce sont les variables du DOM document ... ce qui fait planter ma page lorsque je tente de les mettre.

<!--  initialize the slideshow when the DOM is ready -->
@
$(document).ready(function() {
   $('.slideshow').cycle({
       fx: 'fade', // choose your transition type, ex: fade, scrollUp, shuffle, etc...
                   speed:   300,
                   timeout: 3000,
                   pause:   1
   });
});
@

Ce sont ces variables que je n'arrive pas à rentrer. J'ai essayer de les mettre dans un JS et d'intégrer celui ci mais ca ne marche pas.
Merci de l'aide

[AAymeric]

Le code JavaScript que tu as écris est correct.
Question : Est-ce que tu as plusieurs class slideshow dans ton code ?
Parce que tu utilises une classe là (.slideshow), or si j'ai bien compris il y a pas plusieurs slideshow. Donc, lorsque un div est unique c'est un id pas une classe. #slideshow dans le js et div id="slideshow" dans le code. C'est une question de CSS ça ^^

Question : Où à tu as déclaré le .js ?

[paulo198851]

J'utilise la classe .slideshow une seule fois donc il ne devrait pas y avoir de soucis la dessus, et dans mon css j'ai bien déclarer une classe.

Sinon pour les js, je les ai intégrer dans mon fichier header.tpl de mon theme prestashop à ce niveau la :

       @ type="text/javascript">
           var baseDir = '{$content_dir}';
           var static_token = '{$static_token}';
           var token = '{$token}';
           var priceDisplayPrecision = {$priceDisplayPrecision*$currency->decimals};
           var roundMode = {$roundMode};
       @


       @ type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js">@
       @ type="text/javascript" src="http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.2.72.js">@
       @ type="text/javascript" src="http://malsup.github.com/jquery.easing.1.1.1.js">@

En fait ce qu'il me manque c'est ces lignes la :

<!--  initialize the slideshow when the DOM is ready -->
@ type="text/javascript">
$(document).ready(function() {
   $('.slideshow').cycle({
       fx: 'fade', // choose your transition type, ex: fade, scrollUp, shuffle, etc...
                   speed:   300,
                   timeout: 3000,
                   pause:   1
   });
});
@

Que je n'arrive pas à intégrer ...
On va y arriver

[AAymeric]

Il faut que tu les mettes au même endroit.
Soit tu les mets dans un fichier par exemple pub.js que tu importes par la suite. Soit tu mets direct dans le document comme tel.
Regarde sur le site du plugin Cycle, affiche le code source pour voir comment ils font.

[paulo198851]

J'avais pensé à cette solution mais ca ne marche toujours pas, j'avais tenter :

Ceci dans mon header.tpl

       @ type="text/javascript" src="www.service2i.fr/themes/prestashop/js/jquery/jquery.cycle.var.js">@

et ce Js contient ces valeurs la :

$(document).ready(function() {
   $('.slideshow').cycle({
       fx: 'fade', // choose your transition type, ex: fade, scrollUp, shuffle, etc...
                   speed:   300,
                   timeout: 3000,
                   pause:   1
   });
});

Je ne comprend pas j'ai du oublié quelque chose

[paulo198851]

Voici l'adresse du site, le module ce site en bas a droite.
http://www.service2i.fr/

On remarque que les images s'affiche les unes en dessous des autres et ne tourne pas

[AAymeric]

Il y a une erreur quand tu importes ton .js
Il faut que tu utilises la variable smarty {$js_dir} au lieu de taper toute l'url à la mimine.
Ce qui donne donc :
src="{$js_dir}jquery/jquery.cycle.var.js"

[paulo198851]

J'ai utilise cette fonction, apparemment quand je regarde ma source je peux accéder à tout les js.
Donc ca devrait marcher et toujours pas les images s'affichent les une en dessous des autres et l'effet jquery n'apparait pas .
Proche de but je le sens

[AAymeric]

C'est un conseil. J'utilise le plugin Cycle depuis un moment et je te propose de au lieu de mettre tes images à la suite les mettre dans un div chacune.
Exemple :

Peut-être ça va résoudre le problème.

[paulo198851]

J'ai essayer de mettre des divs et toujours rien, la première image s'affiche mais les autres n'enchaine pas derrière plusieurs js peuvent t'il faire conflit ?

Quand je fais deuxième bouton afficher sur l'image qui ne bouge pas il m'affiche la deuxième, ce qui est bizzard.

[paulo198851]

J'ai un message d'erreur quand je vais sur IE, je vous met un screen.
Objet attendu ? c'est à dire ?

Et quand je clique pour faire changer d'image on dirait que j'ai un dépassement de mémoire ... O_o
Merci

Je viens de me rendre compte que les JS de Jquery sont en conflit avec le .js utilisés par le header.tpl.
Donc je vais chercher comment contourner ce problème .

[AAymeric]

Ce qui peut produire un conflit c'est que tu importe peut-être plusieurs librairies jquery.
Importe seulement la librairie js Cycle.

[paulo198851]

Il y à déjà ces librairies

           @ type="text/javascript" src="{$content_dir}js/jquery/jquery-1.2.6.pack.js">@
       @ type="text/javascript" src="{$content_dir}js/jquery/jquery.easing.1.3.js">@
       @ type="text/javascript" src="{$content_dir}js/jquery/jquery.hotkeys-0.7.8-packed.js">@

Si je les retire cela fait bug ma colonne catégorie ainsi que les lightbox ... =$
Je ne sais pas comment faire la =$

[AAymeric]

Pour faire marcher le plugin Cycle importe juste la librairie Cycle pas autre chose, car Jquery est de base dans l'outil.

[paulo198851]

Merci beaucoup pour ta patience
Ça marche maintenant, il me reste plus qu'a modifier les liens pour que cela fonctionne avec les liens du module c'est à dire mettre les bonnes images et les bons liens.

Je continu mon épopée .

[paulo198851]

Petite question tu saurais comment déplacer mon module publicité sur la droite ?
Le choix est grisé dans les modification.
Merci

Edit : Greffer module sur module de gauche;

Post résolu entièrement !
Merci à toi.

[AAymeric]

Pense à modifier le titre de ton sujet avec [RESOLU].

[paulo198851]

J'ai mis en ligne le module pubs, si certaines personnes sont intéressés je serais ravis des les aidés.
Merci.

www.service2i.fr (en haut à droite)

[nagneau]

Je serais très intéressé par ce module, pourrais tu le mettre sur le forum en zip, je pense que cela devrait intéressé beaucoup de monde.

Merci de cette contribution