Conflit entre deux scripts jquery

Version imprimable

Bonjour,

Débutant en javascript, je travaille actuellement sur un site ou je souhaite intégrer deux scripts jquery :

une fonction de smooth scrolling que j'ai trouvé ici : http://www.devirtuoso.com/2011/11/sm...ing-in-jquery/
un slideshow pour images récupéré là :http://www.slidesjs.com/

Les deux scripts marchent très bien séparément mais impossible de les faire fonctionner ensemble.
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 <script src="js/jquery.min.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function() { // Click event for any anchor tag that's href starts with # $('a[href^="#"]').click(function(event) { // The id of the section we want to go to. var id = $(this).attr("href"); // An offset to push the content down from the top. var offset = 350; // Our scroll target : the top position of the // section that has the id referenced by our href. var target = $(id).offset().top - offset; // The magic...smooth scrollin' goodness. $('html, body').animate({scrollTop:target}, 500); //prevent the page from jumping down to our section. event.preventDefault(); }); }); </script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js" type="text/javascript"></script> <script src="js/slides.min.jquery.js" type="text/javascript"></script> <script type="text/javascript"> $(function(){ $('#slides,#slides_two,#slides_three').slides({ preload: true, preloadImage: 'img/loading.gif', effect: 'fade', crossfade: true, fadeSpeed: 120, }); }); </script>
C'est la première fois que j'essai d'intégrer moi-même des scripts mais j'ai l'impression que ça vien du fait que les deux scripts utilisent le signe # pour deux fonctions différentes : le smooth scroll comme ancre dans la page pour arriver au bon endroit et le slideshow pour numéroter les images ou faire fonctionner les fonctions "previous" et "next".

Savez-vous comment je peux m'en sortir ?
Merci d'avance pour vos réponses

Tu chargeais deux fois jQuery, ce qui créait surement un conflit, de plus, tu peux tout grouper dans un même script, essaie ça:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
 
<script src="js/jquery.min.js" type="text/javascript"></script>
<script src="js/slides.min.jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
	// Click event for any anchor tag that's href starts with #
	$('a[href^="#"]').click(function(event) {
 
		// The id of the section we want to go to.
		var id = $(this).attr("href");
 
		// An offset to push the content down from the top.
		var offset = 350;
 
		// Our scroll target : the top position of the
		// section that has the id referenced by our href.
		var target = $(id).offset().top - offset;
 
		// The magic...smooth scrollin' goodness.
		$('html, body').animate({scrollTop:target}, 500);
 
		//prevent the page from jumping down to our section.
		event.preventDefault();
	});			
 
	$('#slides,#slides_two,#slides_three').slides({
		preload: true,
		preloadImage: 'img/loading.gif',
		effect: 'fade',
		crossfade: true,
		fadeSpeed: 120,
	});
});
</script>

Remplace la première ligne par:

Code:

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

pour charger jQuery à partir du CDN de Google.

12/10/2012, 08h44
SpaceFrog

voir noConflict()
12/10/2012, 09h48
Chronocide

Bonjour, la première méthode ne marche mais merci quand même!
Dans mes recherches pour essayer de regler le problème je suis tombé sur "noConflict()" mais ça dépassait un peu mon domaine de compétences en java et j'ai l'impression que je vais mal l'intégrer...

Mais bon je vais essayer, merci !

Je me base sur cette page pour essayer de comprendre : http://api.jquery.com/jQuery.noConflict/
12/10/2012, 13h54
MrPringle

Une erreur JS se déclenche? C'est possible de voir la page par hasard?

Bonjour,

Pas de résultat avec NoConflict() mais j'ai finalement réussi à regler le problème en récupérant une partie du code fourni par le site http://www.slidesjs.com/

Je poste le résultat ici pour ceux que ça intéresse.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
 
	<script src="js/slides.min.jquery.js"></script>
		<script text="javascript">
			$(function(){
				$('#slides,#slides_two,#slides_three').slides({
					preload: true,
					preloadImage: 'img/loading.gif',
					generatePagination: true,
					effect: 'fade',
					crossfade: true,
					fadeSpeed: 150,
				});
			});
		</script>
 
	<script text="javascript">
	$(document).ready(function() {
 
	    // Click event for any anchor tag that's href starts with #
	    $('a[href^="#"]').click(function(event) {
 
	        // The id of the section we want to go to.
	        var id = $(this).attr("href");
 
	        // An offset to push the content down from the top.
	        var offset = 380;
 
	        // Our scroll target : the top position of the
	        // section that has the id referenced by our href.
	        var target = $(id).offset().top - offset;
 
	        // The magic...smooth scrollin' goodness.
	        $('html, body').animate({scrollTop:target}, 500);
 
	        //prevent the page from jumping down to our section.
	        event.preventDefault();
	    });
	});
	</script>

Merci beaucoup !