Plugin mootools ne fonctionne pas correctement
Bonjour tout le monde,
J'essaie d'utiliser ce plugin mootools :
http://zendold.lojcomm.com.br/icarousel/example6.asp
Mais j'arrive à ce résulat :
http://164.15.112.38/Cel/Carrousel/index.php
Il me semble pourtant avoir suivi chaque étape :
Dans le head :
Code:
1
2
3
4
5
| <script type="text/javascript" src="mootools-1.2.4-core-yc.js"></script>
<script type="text/javascript" src="iCarousel-full.js"></script>
<link rel="stylesheet" media="screen" href="style.css" />
</head> |
Le code HTML :
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
| <h3>VI. Horizontal images slider</h3>
<div id="example_6">
<ul id="example_6_content">
<li class="example_6_item"><a href="#"><img src="images/ex6_1.jpg" alt="slide 1" /></a></li>
<li class="example_6_item"><a href="#"><img src="images/ex6_2.jpg" alt="slide 2" /></a></li>
<li class="example_6_item"><a href="#"><img src="images/ex6_3.jpg" alt="slide 3" /></a></li>
<li class="example_6_item"><a href="#"><img src="images/ex6_4.jpg" alt="slide 4" /></a></li>
<li class="example_6_item"><a href="#"><img src="images/ex6_5.jpg" alt="slide 5" /></a></li>
<li class="example_6_item"><a href="#"><img src="images/ex6_6.jpg" alt="slide 6" /></a></li>
<li class="example_6_item"><a href="#"><img src="images/ex6_7.jpg" alt="slide 7" /></a></li>
</ul>
<div id="example_6_frame">
<ul>
<li><a href="#"><img id="thumb0" src="images/ex6_1t.jpg" alt="thumbnail 1" /></a></li>
<li><a href="#"><img id="thumb1" src="images/ex6_2t.jpg" alt="thumbnail 2" /></a></li>
<li><a href="#"><img id="thumb2" src="images/ex6_3t.jpg" alt="thumbnail 3" /></a></li>
<li><a href="#"><img id="thumb3" src="images/ex6_4t.jpg" alt="thumbnail 4" /></a></li>
<li><a href="#"><img id="thumb4" src="images/ex6_5t.jpg" alt="thumbnail 5" /></a></li>
<li><a href="#"><img id="thumb5" src="images/ex6_6t.jpg" alt="thumbnail 6" /></a></li>
<li><a href="#"><img id="thumb6" src="images/ex6_7t.jpg" alt="thumbnail 7" /></a></li>
</ul>
</div>
</div> |
J'ai mis ce script dans le body, l'erreur est peut être ici ? :
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
|
<script>
window.addEvent("domready", function() {
var ex6Carousel = new iCarousel("example_6_content", {
idPrevious: "example_6_previous",
idNext: "example_6_next",
idToggle: "undefined",
item: {
klass: "example_6_item",
size: 640
},
animation: {
type: "scroll",
duration: 1000,
amount: 1
}
});
$("thumb0").addEvent("click", function(event){new Event(event).stop();ex6Carousel.goTo(0)});
$("thumb1").addEvent("click", function(event){new Event(event).stop();ex6Carousel.goTo(1)});
$("thumb2").addEvent("click", function(event){new Event(event).stop();ex6Carousel.goTo(2)});
$("thumb3").addEvent("click", function(event){new Event(event).stop();ex6Carousel.goTo(3)});
$("thumb4").addEvent("click", function(event){new Event(event).stop();ex6Carousel.goTo(4)});
$("thumb5").addEvent("click", function(event){new Event(event).stop();ex6Carousel.goTo(5)});
$("thumb6").addEvent("click", function(event){new Event(event).stop();ex6Carousel.goTo(6)});
});
</script> |
Mon CSS est présent :
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
|
/* example_6 css */
#example_6 {
position: relative; /* important */
overflow: hidden; /* important */
width: 640px; /* important */
height: 540px; /* important */
margin: 0;
background: #fff;
}
#example_6_content {
position: absolute;
top: 0;
margin-left: 0;
}
#example_6_content
#example_6_content li {
list-style: none;
margin: 0;
padding: 0;
}
#example_6_content {
width: 13440px;
}
#container_bd #example_6 ul li {
display: block;
float: left;
margin: 0;
padding: 0;
border: none;
background-color: #fff;
}
#container_bd #example_6 ul li img {
display: block;
}
#example_6_frame {
position: relative;
margin: 485px 131px 0 131px;
}
#container_bd #example_6_frame ul li {
margin: 0 2px;
}
#container_bd #example_6_frame ul li img{
border: 1px solid #9cf;
padding: 2px;
}
#container_bd #example_6_frame ul li img:hover {border: 1px solid #369;} |
Mais je n'obtiens pas le bon résultat.
Voyez-vous ce qui cloche ?
Merci d'avance.
beegees
