11552 sujets

JavaScript, DOM et API Web HTML5

Bonjour,
Premièrement je suis désolé de revenir sur un sujet qui a été traité plus d'une fois sur le forum, mais le fait est que je n'arrive pas à comprendre les différentes solutions qui ont été proposées Smiley decu

Deuxièmement, comme le titre de mon sujet l'indique, j'ai du mal à faire fonctionner deux scrips jquery sur la même page. Soit c'est l'un, soit c'est l'autre. Le premier est le slideshow "Nivo-slider", et le second, le script "Sexy-Lightbox". Les scripts sont respectivement:


<link rel="stylesheet" href="themes/wds/wds.css" type="text/css" media="screen" />
<link rel="stylesheet" href="themes/default/default.css" type="text/css" media="screen" />
 <link rel="stylesheet" href="themes/pascal/pascal.css" type="text/css" media="screen" />
 <link rel="stylesheet" href="themes/orman/orman.css" type="text/css" media="screen" />
 <link rel="stylesheet" href="nivo-slider.css" type="text/css" media="screen" />
 <link rel="stylesheet" href="style.css" type="text/css" media="screen" />


<!--[if lte IE 9]>
<link rel="stylesheet" href="themes/wds/ie.css" type="text/css" media="screen" />
<![endif]-->

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script src="scripts/jquery.nivo.slider.pack.js" type="text/javascript"></script>

<script type="text/javascript">
$(window).load(function() {
    $('#slider').nivoSlider();
});
</script>


et

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
  <script type="text/javascript" src="jquery.easing.1.3.js"></script>
  <script type="text/javascript" src="sexylightbox.v2.3.jquery.min.js"></script>
  <link rel="stylesheet" href="sexylightbox.css" type="text/css" media="all" />

  <script type="text/javascript">
    $(document).ready(function(){
      SexyLightbox.initialize({color:'black', dir: 'sexyimages'});
    });
  </script>


Il y a sans aucun doute un conflit entre ces deux scripts mais comment le résoudre? Je n'en ai absolument aucune idée. Le sujet sur lequel je suis tombé et traitant le même cas se trouve ici

Voilà, malgré les contraintes j'espère avoir une solution à mon problème Smiley ohwell
Merci d'avance!
Modifié par Chokoulah (07 Dec 2011 - 12:15)
Bonjour,

si tu mets tes deux blocs dans la même page, tu vas tenter d'inclure deux fois jquery, avec 2 versions différentes:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>


la version 1.4.2

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>


la version 1.3.2

ne garde que l'une de ces deux lignes, et tant qu'à faire, réunis ces deux parties en une:
<script type="text/javascript">

$(window).load(function() {

    $('#slider').nivoSlider();

});

</script>


 <script type="text/javascript">

    $(document).ready(function(){

      SexyLightbox.initialize({color:'black', dir: 'sexyimages'});

    });

  </script>


en quelquechose comme çà:

</script>
 <script type="text/javascript">

    $(document).ready(function(){

      SexyLightbox.initialize({color:'black', dir: 'sexyimages'});

      $('#slider').nivoSlider();

    });

  </script>
Bonsoir, et merci de m'avoir répondu aussi rapidement.
J'ai d'abord commencé par supprimer les lignes qui ne me servaient à rien sur ces deux scripts. Ensuite, comme vous me l'avez conseillé, je les ai combinés puis j'ai rajouté les lignes de code que vous m'avez passé. J'ai obtenu ceci:


 <link rel="stylesheet" href="themes/orman/orman.css" type="text/css" media="screen" />
 <link rel="stylesheet" href="nivo-slider.css" type="text/css" media="screen" />
 <link rel="stylesheet" href="style.css" type="text/css" media="screen" />


<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script src="scripts/jquery.nivo.slider.pack.js" type="text/javascript"></script>
<script type="text/javascript" src="jquery.easing.1.3.js"></script>
<script type="text/javascript" src="sexylightbox.v2.3.jquery.min.js"></script>

 <script type="text/javascript">
    $(document).ready(function(){
      SexyLightbox.initialize({color:'black', dir: 'sexyimages'});
      $('#slider').nivoSlider();
    });
  </script>


Malheureusement le résultat est le même, le problème n'est toujours pas réglé et aucun des plugins ne s'exécute Smiley ohwell
Je suis tombé sur une fonction, jQuery.noConflict(). Le problème est que je ne sais pas trop comment m'en servir. Auriez-vous une idée? Peut-être que cela pourrait résoudre le conflit qu'il y a entre ces deux scripts qui doivent s'exécuter sur la même page. La documentation de la dite fonction se trouve ici