Conflit probable entre deux carousels
Bonjour à tous !
je suis bloqué pour quelque chose qui doit être assez basique.... mais quand on est c... on est c... Smiley cligne
j'ai une page avec deux carousels qui fonctionne bien sauf pour le second carousel dont la partie texte ne se réactualise pas.
si je mets ce 2ème carousel dans une page html où il est tout seul, tout fonctionne bien.
voici le code :
je pense qu'il y a un conflit sur une div dans la partie jquery qui réactualise le texte...
Merci de votre aide !
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
| <div id="main_area">
<div class="row hidden-phone" id="slider-thumbs">
<div>
<ul class="thumbnails"><li class="span2">
<a class="thumbnail" id="carousel-selector1-0">
<img src="templates/template1/vert/image_xs.jpg" />
</a>vert</li><li class="span2">
<a class="thumbnail" id="carousel-selector1-1">
<img src="templates/template1/gris-bleu/image_xs.jpg" />
</a>gris-bleu</li>
</ul></div></div>
<div class="span12" id="slider">
<div class="row">
<div class="span8" id="carousel-bounding-box">
<div id="myCarousel1" class="carousel slide">
<div class="carousel-inner">
<div class="item active" data-slide-number1="0">
<img src="templates/template1/vert/image_xl.jpg" />
</div>
<div class="item " data-slide-number1="1">
<img src="templates/template1/gris-bleu/image_xl.jpg" />
</div>
</div>
<!-- Carousel nav -->
<a class="carousel-control left" href="#myCarousel1" data-slide="prev">‹</a>
<a class="carousel-control right" href="#myCarousel1" data-slide="next">›</a>
</div></div>
<div class="span4" id="carousel-text1"></div>
<div style="display: none;" id="slide-content1">
<div id="slide-content1-0">
<h2>Kit graphique n°1</h2>
<p>Couleur : vert</p>
<p class="sub-text"><a href="#">Visiter le site de démo</a></p>
<div class="form-actions">
<form class="form-vertical" method="post" action="index.php?cat=compte&cmd=admstyles">
<input type="hidden" id="id_m" name="id_m" value="16" >
<input type="hidden" id="ChoixTempl" name="ChoixTempl" value="1" >
<input type="hidden" id="ChoixCoul" name="ChoixCoul" value="vert" >
<button class="btn btn-primary" type="submit" name="post" value="new">Valider ce choix</button>
</form>
</div>
</div><div id="slide-content1-1">
<h2>Kit graphique n°1</h2>
<p>Couleur : gris-bleu</p>
<p class="sub-text"><a href="#">Visiter le site de démo</a></p>
<div class="form-actions">
<form class="form-vertical" method="post" action="index.php?cat=compte&cmd=admstyles">
<input type="hidden" id="id_m" name="id_m" value="16" >
<input type="hidden" id="ChoixTempl" name="ChoixTempl" value="1" >
<input type="hidden" id="ChoixCoul" name="ChoixCoul" value="gris-bleu" >
<button class="btn btn-primary" type="submit" name="post" value="new">Valider ce choix</button>
</form>
</div>
</div></div></div><hr>
<script> |
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
| jQuery(document).ready(function($) {
$('#myCarousel1').carousel({
interval: 0
});
$('#carousel-text1').html($('#slide-content1-0').html());
//Handles the carousel thumbnails
$('[id^=carousel-selector1-]').click( function(){
var id_selector = $(this).attr("id");
var id = id_selector.substr(id_selector.length -1);
var id = parseInt(id);
$('#myCarousel1').carousel(id);
});
// When the carousel slides, auto update the text
$('#myCarousel1').on('slid', function (e) {
var id = $('.item.active').data('slide-number1');
$('#carousel-text1').html($('#slide-content1-'+id).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
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
| </script>
</div></div>2
<div id="main_area">
<div class="row hidden-phone" id="slider-thumbs">
<div>
<ul class="thumbnails"><li class="span2">
<a class="thumbnail" id="carousel-selector2-0">
<img src="templates/template2/bleu-blanc/image_xs.jpg" />
</a>bleu-blanc</li><li class="span2">
<a class="thumbnail" id="carousel-selector2-1">
<img src="templates/template2/orange-gris/image_xs.jpg" />
</a>orange-gris</li></ul></div></div>
<div class="span12" id="slider">
<div class="row">
<div class="span8" id="carousel-bounding-box">
<div id="myCarousel2" class="carousel slide">
<div class="carousel-inner">
<div class="item active" data-slide-number2="0">
<img src="templates/template2/bleu-blanc/image_xl.jpg" />
</div><div class="item " data-slide-number2="1">
<img src="templates/template2/orange-gris/image_xl.jpg" />
</div></div>
<!-- Carousel nav -->
<a class="carousel-control left" href="#myCarousel2" data-slide="prev">‹</a>
<a class="carousel-control right" href="#myCarousel2" data-slide="next">›</a>
</div></div>
<div class="span4" id="carousel-text2"></div>
<div style="display: none;" id="slide-content2">
<div id="slide-content2-0">
<h2>Kit graphique n°2</h2>
<p>Couleur : bleu-blanc</p>
<p class="sub-text"><a href="#">Visiter le site de démo</a></p>
<div class="form-actions">
<form class="form-vertical" method="post" action="index.php?cat=compte&cmd=admstyles">
<input type="hidden" id="id_m" name="id_m" value="16" >
<input type="hidden" id="ChoixTempl" name="ChoixTempl" value="2" >
<input type="hidden" id="ChoixCoul" name="ChoixCoul" value="bleu-blanc" >
<button class="btn btn-primary" type="submit" name="post" value="new">Valider ce choix</button>
</form>
</div>
</div><div id="slide-content2-1">
<h2>Kit graphique n°2</h2>
<p>Couleur : orange-gris</p>
<p class="sub-text"><a href="#">Visiter le site de démo</a></p>
<div class="form-actions">
<form class="form-vertical" method="post" action="index.php?cat=compte&cmd=admstyles">
<input type="hidden" id="id_m" name="id_m" value="16" >
<input type="hidden" id="ChoixTempl" name="ChoixTempl" value="2" >
<input type="hidden" id="ChoixCoul" name="ChoixCoul" value="orange-gris" >
<button class="btn btn-primary" type="submit" name="post" value="new">Valider ce choix</button>
</form>
</div>
</div></div></div><hr>
<script> |
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
| jQuery(document).ready(function($) {
$('#myCarousel2').carousel({
interval: 0
});
$('#carousel-text2').html($('#slide-content2-0').html());
//Handles the carousel thumbnails
$('[id^=carousel-selector2-]').click( function(){
var id_selector = $(this).attr("id");
var id = id_selector.substr(id_selector.length -1);
var id = parseInt(id);
$('#myCarousel2').carousel(id);
});
// When the carousel slides, auto update the text
$('#myCarousel2').on('slid', function (e) {
var id = $('.item.active').data('slide-number2');
$('#carousel-text2').html($('#slide-content2-'+id).html());
});
}); |
