Conflit entre deux modules jQuery sur une même page html
Bonjour,
Je me sens un peu bête depuis ce matin car je suis un tutorial à la lettre (http://www.kyrielles.net/sliderkit/sliderkit_fr.html) pour implanter une chouette galerie JQuery sur mon site et pourtant elle ne fonctionne pas...
Pour être plus précis, quand j'enlève le lien vers mon script JQuery je vois mes photos et ma structure s'afficher (grossièrement) mais quand je rajoute mon code, l’entièreté du module disparait.
Peut-être est-ce à cause du slideshow JQ que j'ai placé plus tot sur la même page et dont le code rentre en conflit ?
Je vous c/c mon code
Head
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
| <!-- jQuery library -->
<script type="text/javascript" src="js/external/_oldies/jquery-1.3.min.js"></script>
<!--<script type="text/javascript" src="js/external/jquery-1.6.2.min.js"></script>-->
<!-- jQuery Plugin scripts -->
<script type="text/javascript" src="js/external/jquery.easing.1.3.min.js"></script>
<!-- Slider Kit scripts -->
<script type="text/javascript" src="js/sliderkit/jquery.sliderkit.1.9.2.pack.js"></script>
<script type="text/javascript" src="js/sliderkit/addons/sliderkit.counter.1.0.pack.js"></script>
<script type="text/javascript" src="js/sliderkit/addons/sliderkit.imagefx.1.0.pack.js"></script>
<script type="text/javascript" src="js/sliderkit/addons/sliderkit.delaycaptions.1.1.pack.js"></script>
<!-- Slider Kit launch -->
<script type="text/javascript">
$(window).load(function(){ //$(window).load() must be used instead of $(document).ready() because of Webkit compatibility
/*---------------------------------
* Example #01
*---------------------------------*/
$(".delaycaptions-01").sliderkit({
circular:false,
mousewheel:false,
keyboard:true,
shownavitems:4,
auto:false,
panelfxspeed:500,
delaycaptions:{
delay:500, // must be equal or higher than panelfxspeed
position:'bottom',
transition:'sliding',
duration:300, // must be less equal or higher than panelfxspeed
easing:'easeOutExpo'
}
});
/*---------------------------------
* Example #01 > Extending
*---------------------------------*/
// Get the sliderkit object data
var myGallery01 = $(".delaycaptions-01").data("sliderkit");
// Reset previous animations (internal method)
var clearAnimation = function(){
myGallery01._clearCallBacks( myGallery01.panelAnteFns );
myGallery01._clearCallBacks( myGallery01.panelPostFns );
}
// Links handlers
$("#setleft").click(function(){
clearAnimation();
myGallery01.panelPostFns.length = 0;
myGallery01.DelayCaptions({position : "left"});
return false;
});
$("#setright").click(function(){
clearAnimation();
myGallery01.DelayCaptions({position : "right"});
return false;
});
$("#settop").click(function(){
clearAnimation();
myGallery01.DelayCaptions({position : "top"});
return false;
});
$("#setbottom").click(function(){
clearAnimation();
myGallery01.DelayCaptions({position : "bottom"});
return false;
});
});
</script>
<!-- Slider Kit styles -->
<link rel="stylesheet" type="text/css" href="css/sliderkit-core.css" media="screen, projection" />
<link rel="stylesheet" type="text/css" href="css/sliderkit-demos.css" media="screen, projection" />
<!-- Slider Kit compatibility -->
<!--[if IE 6]><link rel="stylesheet" type="text/css" href="css/sliderkit-demos-ie6.css" /><![endif]-->
<!--[if IE 7]><link rel="stylesheet" type="text/css" href="css/sliderkit-demos-ie7.css" /><![endif]-->
<!--[if IE 8]><link rel="stylesheet" type="text/css" href="css/sliderkit-demos-ie8.css" /><![endif]-->
<!-- Site styles -->
<link rel="stylesheet" type="text/css" href="css/sliderkit-site.css" media="screen, projection" /> |
Body
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
| <!-- Main container -->
<div class="sliderkit">
<!-- Nav container -->
<div class="sliderkit-nav">
<!-- Nav clip -->
<div class="sliderkit-nav-clip">
<ul>
<li><a href="#" rel="nofollow" title="[link title]"><img src="img/galery/photos/mini/sample-01.jpg" alt="[Alternative text]" /></a></li>
<li><a href="#" rel="nofollow" title="[link title]"><img src="img/galery/photos/mini/sample-01.jpg" alt="[Alternative text]" /></a></li>
<li><a href="#" rel="nofollow" title="[link title]"><img src="img/galery/photos/mini/sample-01.jpg" alt="[Alternative text]" /></a></li>
<li><a href="#" rel="nofollow" title="[link title]"><img src="img/galery/photos/mini/sample-01.jpg" alt="[Alternative text]" /></a></li>
</ul>
</div>
<!-- Nav buttons -->
<div class="sliderkit-nav-btn sliderkit-nav-prev"><a rel="nofollow" href="#" title="Previous line"><span>Previous</span></a></div>
<div class="sliderkit-nav-btn sliderkit-nav-next"><a rel="nofollow" href="#" title="Next line"><span>Next</span></a></div>
</div><!-- // end of Nav container -->
<!-- Panels container -->
<div class="sliderkit-panels">
<!-- Go buttons -->
<div class="sliderkit-go-btn sliderkit-go-prev"><a rel="nofollow" href="#" title="Previous"><span>Previous</span></a></div>
<div class="sliderkit-go-btn sliderkit-go-next"><a rel="nofollow" href="#" title="Next"><span>Next</span></a></div>
<!-- Panel divs -->
<div class="sliderkit-panel">
<a href="img/galery/photos/sample-01.jpg" title="[title]"><img src="img/galery/photos/sample-01.jpg" alt="[Alternative text]" /></a>
</div>
<div class="sliderkit-panel">
<a href="img/galery/photos/sample-01.jpg" title="[title]"><img src="img/galery/photos/sample-01.jpg" alt="[Alternative text]" /></a>
</div>
<div class="sliderkit-panel">
<a href="img/galery/photos/sample-01.jpg" title="[title]"><img src="img/galery/photos/sample-01.jpg" alt="[Alternative text]" /></a>
<!-- Place caption textbox here if needed -->
<div class="sliderkit-panel-textbox">
<div class="sliderkit-panel-text">
<h4>Caption title</h4>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
</div>
<div class="sliderkit-panel-overlay"></div>
</div>
</div>
</div><!-- // end of Panels container -->
</div><!-- // end of Main container --> |
Ce n'est qu'une partie de mon code, je ne vous c/c pas le reste car c'est une mise en page en tableau... (mon client voudrait que le site soit visible même sur Ie6 donc j'ai préféré cette façon de faire. C'est probablement une erreur mais bon...).
Pensez-vous que le fait que je met des "div" dans un tableau soit un problème également ?
Merci d'avance pour vos réponses, je suis vraiment débutant en JS et je fonctionne par c/c et par tuto, donc n'hésitez pas à me parler comme a un enfant ;)
(par contre je me débrouille en html/css... C'est déja ça non ?)
(oups, pardon pour le mauvais endroit de topic :/)
