Discussion :

[Chronocide]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[MrPringle]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

<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.

[SpaceFrog]

voir noConflict()

[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/

[MrPringle]

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

[Chronocide]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 !