Faire fonctionner deux scroller sur la même page

Version imprimable

2 pièce(s) jointe(s)

Bonjour, je cherche à faire une page avec ces deux scroller, mais celui du haut n'apparait pas. Chez moi hors connexion les deux sont présents mais celui du bas ne tourne pas.
pourriez-vous m'aider à régler le problème.
Je pense que le problème vient de ces lignes

Code:

1
2
3
4
5
6
7
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
		<script type="text/javascript" src="js/jquery.gallery.js"></script>
		<script type="text/javascript">
			$(function() {
				$('#dg-container').gallery();
			});
		</script/>

Merci d'avance

http://www.pralognan-vanoise.com/tes...plet/index.htm

Pièce jointe 168965

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
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 <meta name="XAR Files" content="index_htm_files/xr_files.txt"/>
 <title>index</title>
 <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
 <meta http-equiv="Content-Type" content="text/html; charset=Windows-1252"/>
 <meta name="Generator" content="Xara HTML filter v.5.0.1.979"/>
 <link rel="stylesheet" type="text/css" href="index_htm_files/xr_main.css"/>
 <link rel="stylesheet" type="text/css" href="index_htm_files/xr_text.css"/>
 <script type="text/javascript" src="index_htm_files/roe.js"></script>
     <meta http-equiv="content-type" content="text/html;charset=utf-8"/>
    <title>Amazing Slider</title>
 
    <!-- Insert to your webpage before the </head> -->
    <script src="sliderengine/jquery.js"></script>
    <script src="sliderengine/amazingslider.js"></script>
    <link rel="stylesheet" type="text/css" href="sliderengine/amazingslider-1.css">
    <script src="sliderengine/initslider-1.js"></script>
    <!-- End of head section HTML codes -->
 	<meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
        <title>3D Gallery with CSS3 and jQuery</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
        <meta name="description" content="3D Gallery with CSS3 and jQuery" />
        <meta name="keywords" content="3d, gallery, jquery, css3, auto, slideshow, navigate, mouse scroll, perspective" />
        <meta name="author" content="Codrops" />
        <link rel="shortcut icon" href="../favicon.ico"> 
        <link rel="stylesheet" type="text/css" href="css/demo.css" />
        <link rel="stylesheet" type="text/css" href="css/style.css" />
		<script type="text/javascript" src="js/modernizr.custom.53451.js"></script>
</head>
<body>
<div class="xr_ap" id="xr_xr" style="width: 1200px; height: 1339px; top:0px; left:50%; margin-left: -600px;">
 <script type="text/javascript">var xr_xr=document.getElementById("xr_xr")</script>
<!--[if IE]><div class="xr_ap" id="xr_xri" style="width: 1200px; height: 1339px; clip: rect(0px 1200px 1339px 0px);"><![endif]-->
<!--[if !IE]>--><div class="xr_ap" id="xr_xri" style="width: 1200px; height: 1339px; clip: rect(0px, 1200px, 1339px, 0px);"><!--<![endif]-->
 <div style="position: absolute; left: 0px; top: 0px; width: 1200px; height: 460px;">
 
    <!-- Insert to your webpage where you want to display the slider -->
    <div id="amazingslider-wrapper-1" style="display:block;position:relative;max-width:1200px;margin:0px auto 56px;">
        <div id="amazingslider-1" style="display:block;position:relative;margin:0 auto;">
            <ul class="amazingslider-slides" style="display:none;">
                <li><img src="images2/3.jpg" />
                </li>
                <li><img src="images2/2.jpg" />
                </li>
                <li><img src="images2/1.jpg" />
                </li>
                <li><img src="images2/6.jpg" />
                </li>
                <li><img src="images2/7.jpg" />
                </li>
                <li><img src="images2/8.jpg" />
                </li>
            </ul>
            <ul class="amazingslider-thumbnails" style="display:none;">
                <li><img src="images2/3-tn.jpg" /></li>
                <li><img src="images2/2-tn.jpg" /></li>
                <li><img src="images2/1-tn.jpg" /></li>
                <li><img src="images2/6-tn.jpg" /></li>
                <li><img src="images2/7-tn.jpg" /></li>
                <li><img src="images2/8-tn.jpg" /></li>
            </ul>
        </div>
    </div>
    <!-- End of body section HTML codes -->
 </div>
 <div style="position: absolute; left: 153px; top: 832px; width: 804px; height: 383px;">
			<section id="dg-container" class="dg-container">
				<div class="dg-wrapper">
					<a href="http://www.pralognan-vanoise.com/forum/"><img src="images/1.jpg" alt="image01"><div>FORUM DE PRALOGNAN</div></a>
					<a href="https://www.facebook.com/pralognan"><img src="images/2.jpg" alt="image02"><div>FACEBOOK</div></a>
					<a href="https://plus.google.com/108007209033264831356/posts"><img src="images/3.jpg" alt="image03"><div>GOOGLE+</div></a>
					<a href="https://www.pinterest.com/pralo/"><img src="images/4.jpg" alt="image04"><div>PINTEREST</div></a>
					<a href="https://www.youtube.com/channel/UCgePYiUDsoGrFoCZ1McU0qg/featured?view_as=public"><img src="images/5.jpg" alt="image05"><div>YOUTUBE</div></a>
					<a href="https://huzzaz.com/collection/vos-vidos-sur-le-forum"><img src="images/6.jpg" alt="image06"><div>VOS VIDEOS DE PRALO</div></a>
					<a href="https://pralotalents.wordpress.com/author/pralotalents/"><img src="images/7.jpg" alt="image07"><div>LES TALENTS DE PRALOGNAN</div></a>
					<a href="https://sites.google.com/site/123gravir/"><img src="images/8.jpg" alt="image08"><div>123GRAVIR</div></a>
					<a href="http://www.panoramio.com/user/8269976"><img src="images/9.jpg" alt="image09"><div>PANORAMIO</div></a>
					<a href="https://www.facebook.com/bonhomme.de.neige.2015?ref=hl"><img src="images/10.jpg" alt="image10"><div>FACEBOOK "BONHOMMES DE NEIGE"</div></a>
					<a href="https://www.facebook.com/pages/Selfiepralo/748703911874686?ref=hl"><img src="images/11.jpg" alt="image11"><div>FACEBOOK "SELFIE PRALO"</div></a>
					<a href="http://www.pralognan-vanoise.com/imagelaurent/bibliotheque/bibliotheque.htm"><img src="images/12.jpg" alt="image12"><div>LA BIBLIOTHEQUE DU FORUM</div></a>
					<a href="https://twitter.com/Forum_Pralognan"><img src="images/13.jpg" alt="image12"><div>TWITTER</div></a>
				</div>
				<nav>	
					<span class="dg-prev">&lt;</span>
					<span class="dg-next">&gt;</span>
				</nav>
			</section>
        </div>
		<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
		<script type="text/javascript" src="js/jquery.gallery.js"></script>
		<script type="text/javascript">
			$(function() {
				$('#dg-container').gallery();
			});
		</script/>
 </div>
 <div id="xr_xo0" class="xr_ap" style="left:0; top:0; width:1200px; height:100px; visibility:hidden;">
 <a href="" onclick="return(false);">
 </a>
 </div>
 <div id="xr_xd0"></div>
</div>
</div>
<!--[if lt IE 7]><script type="text/javascript" src="index_htm_files/png.js"></script><![endif]-->
<script type="text/javascript">xr_aeh()</script>
</body>
</html>

13/02/2015, 17h16
SylvainPV

Code:

$('#dg-container').gallery();

dg-container c'est ton premier slider non ? Si tu n'actives pas le deuxième, normal qu'il ne fonctionne pas.
13/02/2015, 17h41
nicotoine

Tu peux me dire ce que je dois faire, là je suis complétement perdu.
merci
13/02/2015, 18h29
SylvainPV

D'après le HTML, on dirait que tu veux utiliser 2 bibliothèques différentes pour tes 2 sliders : jQuery gallery et amazing slider. Est-ce que c'est bien le cas ? Je ne vois pas où tu charges la bibliothèque Amazing Slider.

amazing slider se chage ici je pense

Code:

1
2
3
4
    <script src="sliderengine/jquery.js"></script>
    <script src="sliderengine/amazingslider.js"></script>
    <link rel="stylesheet" type="text/css" href="sliderengine/amazingslider-1.css">
    <script src="sliderengine/initslider-1.js"></script>

13/02/2015, 18h47
nicotoine

voici 2 liens avec les scrollers qui fonctionnent seuls
Quand je les réunis sur une seule page cela ne fonctionne plus

http://www.pralognan-vanoise.com/test/slider1
http://www.pralognan-vanoise.com/test/slider2/index.htm

merci
13/02/2015, 22h10
SylvainPV

Effectivement j'avais loupé ces scripts là. Du coup peux-tu nous montrer le code d'initialisation du slider "amazing" ?

Comment fusionner les deux pages
slider 1 la page complete

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
42
43
44
45
46
47
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html;charset=utf-8"/>
    <title>Amazing Slider</title>
 
    <!-- Insert to your webpage before the </head> -->
    <script src="sliderengine/jquery.js"></script>
    <script src="sliderengine/amazingslider.js"></script>
    <link rel="stylesheet" type="text/css" href="sliderengine/amazingslider-1.css">
    <script src="sliderengine/initslider-1.js"></script>
    <!-- End of head section HTML codes -->
 
</head>
<body>
 
    <!-- Insert to your webpage where you want to display the slider -->
    <div id="amazingslider-wrapper-1" style="display:block;position:relative;max-width:1200px;margin:0px auto 56px;">
        <div id="amazingslider-1" style="display:block;position:relative;margin:0 auto;">
            <ul class="amazingslider-slides" style="display:none;">
                <li><img src="images2/3.jpg" />
                </li>
                <li><img src="images2/2.jpg" />
                </li>
                <li><img src="images2/1.jpg" />
                </li>
                <li><img src="images2/6.jpg" />
                </li>
                <li><img src="images2/7.jpg" />
                </li>
                <li><img src="images2/8.jpg" />
                </li>
            </ul>
            <ul class="amazingslider-thumbnails" style="display:none;">
                <li><img src="images2/3-tn.jpg" /></li>
                <li><img src="images2/2-tn.jpg" /></li>
                <li><img src="images2/1-tn.jpg" /></li>
                <li><img src="images2/6-tn.jpg" /></li>
                <li><img src="images2/7-tn.jpg" /></li>
                <li><img src="images2/8-tn.jpg" /></li>
            </ul>
        </div>
    </div>
    <!-- End of body section HTML codes -->
 
</body>
</html>

slider 2 page complete

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
42
43
44
45
46
<html>
<head>
	<meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
        <title>3D Gallery with CSS3 and jQuery</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
        <meta name="description" content="3D Gallery with CSS3 and jQuery" />
        <meta name="keywords" content="3d, gallery, jquery, css3, auto, slideshow, navigate, mouse scroll, perspective" />
        <meta name="author" content="Codrops" />
        <link rel="shortcut icon" href="../favicon.ico"> 
        <link rel="stylesheet" type="text/css" href="css/demo.css" />
        <link rel="stylesheet" type="text/css" href="css/style.css" />
		<script type="text/javascript" src="js/modernizr.custom.53451.js"></script>
</head>
<body>
			<section id="dg-container" class="dg-container">
				<div class="dg-wrapper">
					<a href="http://www.pralognan-vanoise.com/forum/"><img src="images/1.jpg" alt="image01"><div>FORUM DE PRALOGNAN</div></a>
					<a href="https://www.facebook.com/pralognan"><img src="images/2.jpg" alt="image02"><div>FACEBOOK</div></a>
					<a href="https://plus.google.com/108007209033264831356/posts"><img src="images/3.jpg" alt="image03"><div>GOOGLE+</div></a>
					<a href="https://www.pinterest.com/pralo/"><img src="images/4.jpg" alt="image04"><div>PINTEREST</div></a>
					<a href="https://www.youtube.com/channel/UCgePYiUDsoGrFoCZ1McU0qg/featured?view_as=public"><img src="images/5.jpg" alt="image05"><div>YOUTUBE</div></a>
					<a href="https://huzzaz.com/collection/vos-vidos-sur-le-forum"><img src="images/6.jpg" alt="image06"><div>VOS VIDEOS DE PRALO</div></a>
					<a href="https://pralotalents.wordpress.com/author/pralotalents/"><img src="images/7.jpg" alt="image07"><div>LES TALENTS DE PRALOGNAN</div></a>
					<a href="https://sites.google.com/site/123gravir/"><img src="images/8.jpg" alt="image08"><div>123GRAVIR</div></a>
					<a href="http://www.panoramio.com/user/8269976"><img src="images/9.jpg" alt="image09"><div>PANORAMIO</div></a>
					<a href="https://www.facebook.com/bonhomme.de.neige.2015?ref=hl"><img src="images/10.jpg" alt="image10"><div>FACEBOOK "BONHOMMES DE NEIGE"</div></a>
					<a href="https://www.facebook.com/pages/Selfiepralo/748703911874686?ref=hl"><img src="images/11.jpg" alt="image11"><div>FACEBOOK "SELFIE PRALO"</div></a>
					<a href="http://www.pralognan-vanoise.com/imagelaurent/bibliotheque/bibliotheque.htm"><img src="images/12.jpg" alt="image12"><div>LA BIBLIOTHEQUE DU FORUM</div></a>
					<a href="https://twitter.com/Forum_Pralognan"><img src="images/13.jpg" alt="image12"><div>TWITTER</div></a>
				</div>
				<nav>	
					<span class="dg-prev">&lt;</span>
					<span class="dg-next">&gt;</span>
				</nav>
			</section>
        </div>
		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
		<script type="text/javascript" src="js/jquery.gallery.js"></script>
		<script type="text/javascript">
			$(function() {
				$('#dg-container').gallery();
			});
		</script/>
</body>
</html>

13/02/2015, 22h29
nicotoine

Voici tous les fichiers

http://www.pralo.nevaone.eu/slider2.rar
http://www.pralo.nevaone.eu/slider1.rar
13/02/2015, 22h50
Redbass
Il semblerait que tu charges deux fois jQuery dans ta page:
Code:

1 2 3 4 5 <script src="sliderengine/jquery.js"></script> ... <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
Je te recommanderai de n'en garder qu'un seul pour commencer. Et de placer tous les chargements de libraries dans la balise <head> de ta page.
13/02/2015, 23h13
nicotoine

si j'en enlève un le scroller ne fonctionne plus