Conflit de scripts

Bonjour a tous !

Mon père ma demandé de lui faire un petit site, et je bute un peu.

Je n'y connais pas grand chose (voire même rien...) en js, je me contente donc d'adapter des scripts tout prêts ! J'ai donc eu besoin d'utiliser deux scripts différents, un pour créer un slideshow et faire défiler les images, et un autre qui permet d'ouvrir les images en les agrandissant.

Voici le header de ma page :

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

<!--[if lte IE 7]>
<style type="text/css">
ul li{
	display:inline;
	/*float:left;*/
}
</style>
<![endif]-->

<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="js/lightbox.js"></script>

Je vous montre les scripts :

SLIDSHOW :

$(document).ready(function(){
	/* This code is executed after the DOM has been completely loaded */
	
	var totWidth=0;
	var positions = new Array();
	
	$('#slides .slide').each(function(i){
		
		/* Traverse through all the slides and store their accumulative widths in totWidth */
		
		positions[i]= totWidth;
		totWidth += $(this).width();
		
		/* The positions array contains each slide's commulutative offset from the left part of the container */
		
		if(!$(this).width())
		{
			alert("Please, fill in width & height for all your images!");
			return false;
		}
		
	});
	
	$('#slides').width(totWidth);

	/* Change the cotnainer div's width to the exact width of all the slides combined */

	$('#menu ul li a').click(function(e,keepScroll){

			/* On a thumbnail click */

			$('li.menuItem').removeClass('act').addClass('inact');
			$(this).parent().addClass('act');
			
			var pos = $(this).parent().prevAll('.menuItem').length;
			
			$('#slides').stop().animate({marginLeft:-positions[pos]+'px'},450);
			/* Start the sliding animation */
			
			e.preventDefault();
			/* Prevent the default action of the link */
			
			
			// Stopping the auto-advance if an icon has been clicked:
			if(!keepScroll) clearInterval(itvl);
	});
	
	$('#menu ul li.menuItem:first').addClass('act').siblings().addClass('inact');
	/* On page load, mark the first thumbnail as active */
	
	
	
	/*****
	 *
	 *	Enabling auto-advance.
	 *
	 ****/
	 
	var current=1;
	function autoAdvance()
	{
		if(current==-1) return false;
		
		$('#menu ul li a').eq(current%$('#menu ul li a').length).trigger('click',[true]);	// [true] will be passed as the keepScroll parameter of the click function on line 28
		current++;
	}

	// The number of seconds that the slider will auto-advance in:
	
	var changeEvery = 10;

	var itvl = setInterval(function(){autoAdvance()},changeEvery*1000);

	/* End of customizations */
});

Il y a 6 fichiers pour l'agrandissement des images, je vous met les liens pour éviter le gros pathé ! (le site n'est pas terminé, ne vous préoccupez pas les bugs qu'il pourrait y avoir !)

http://perso.neel.cnrs.fr/thierry.klein/js/builder.js
http://perso.neel.cnrs.fr/thierry.klein/js/effects.js
http://perso.neel.cnrs.fr/thierry.klein/js/lightbox.js
http://perso.neel.cnrs.fr/thierry.klein/js/lightbox-web.js
http://perso.neel.cnrs.fr/thierry.klein/js/prototype.js
http://perso.neel.cnrs.fr/thierry.klein/js/scriptaculous.js

Le problème est que seul un des deux fonctionne selon l'ordre. J'ai lu sur internet que c'était un problème récurrent, mais je crois que mes capacités sont trop limitées pou que je puisse adapter les solutions des autres a mon cas !

Voila, j'espère vraiment que vous pourrez m'aider, je suis au bord de la crise de nerf ![/i]
Modifié par Rockonjohnny (15 Oct 2011 - 21:38)

Salut,

Le code JavaScript que tu nous montres est basé sur la bibliothèque jQuery, qui n'est, visiblement, pas appelée (EDIT : en fait, si, j'ai mal regardé, au temps pour moi).
Modifié par Victor BRITO (15 Oct 2011 - 21:48)

Et comment je pourrais regler ce problème, du coup ? (je suis désolée si je passe un peur pour la noob, mais j'avoue que le js, j'y arrive malheureusement pas !)

Étant donné que jQuery et Prototype utilisent tous les deux le symbole $ pour leurs fonctions (d'ailleurs, je me demande si tu as vraiment besoin d'utiliser ces deux bibliothèques en même temps ), pour ton code JavaScript, il faudra ajouter au tout début la ligne suivante :

var $j = jQuery.noConflict ();

Ensuite, tu remplaces chaque $ de ton code par $j.
Modifié par Victor BRITO (15 Oct 2011 - 21:49)

cf le header, jQuery est bien appelé.

Tu sembles indiquer que tu as déjà trouvé une solution a ton problème, mais que tu ne sais pas l'appliquer. Indique directement la réponse que t'as trouvé, il sera peut-être possible de t'aider à la comprendre.

Là, je dois dire que sans une page d'exemple, ça fait beaucoup de code à analyser, surtout sans une page d'exemple (où on pourrait peut-être voir une erreur via Firebug par exemple).

Sinon pour le noConflict, il suffit de l'appliquer une seule fois si tout le code se trouve dans le document.ready (ce qui semble être le cas).

En fait, il s'agissais de reponses au "cas par cas", donc qui ne s'appliquent pas a mon code (en gos j'avais juste tapé conflit de script sans google), mais j'avoue que en effet ca fait beaucoup de code.