Salut
Ce post s'adresse à ceux qui comme moi n'y connaissent rien en javascrit - jquery
Si comme moi vous avez un slider dans votre header, qu'il fonctionne avec jquery avec des fonctions commençant par $ et que vous avez besoin d'ajouter un autres script jquery dans vos pages et que celui ci utilise également des fonctions avec $, vous aurez un conflit et 1 des deux script ne fonctionnera pas.
Il faut alors ajouter la fonction .jQuery.noConflict();
J'ai lu des post sur le sujet, mais je n'y suis pas arrivé sans un petit coup de main donc voila comment procéder:
Le script de votre slider,à la base, ressemble à quelque chose comme ça:
<script type="text/javascript" src="<{xoImgUrl slider/scripts/jquery-1.6.4.min.js}>"></script> <script type="text/javascript" src="<{xoImgUrl slider/scripts/jquery.nivo.slider.pack.js}>"></script> <script type="text/javascript" src="<{xoImgUrl slider/scripts/jquery.nivo.slider.js}>"></script> <script type="text/javascript"> $(window).load(function() { $('#slider').nivoSlider(); });
votre 2eme script utilise également le $:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $('.xoopstube_image-wrap img').each(function() { var imgClass = $(this).attr('class'); $(this).wrap('<span class="image-wrap ' + imgClass + '" style="width: auto; height: auto;"/>'); $(this).removeAttr('class'); }); });
Et donc il prend le pas sur le premier script et celui ci ne fonctionne plus.
Il faut donc utiliser la fonction .noClonflict() pour remplacer les $ par autre chose sinon ça marche pas.
Moi j'ai lu lu ceci: il faut ajouter jQuery.noConflict(); au début du script et remplacer les $ par jquery mais ce n'est pas aussi simple que ça, voila comment il faut modifier le script qui ne fonctionne plus:
<script type="text/javascript" src="<{xoImgUrl slider/scripts/jquery-1.6.4.min.js}>"></script> <script type="text/javascript" src="<{xoImgUrl slider/scripts/jquery.nivo.slider.pack.js}>"></script> <script type="text/javascript" src="<{xoImgUrl slider/scripts/jquery.nivo.slider.js}>"></script> <script type="text/javascript"> var $j=jQuery.noConflict(); $j(window).load(function() { $j('#slider').nivoSlider(); }); </script>
Et le problème est résolu.
Voilou j'espère que ça aidera quelqu'un