Conflit entre carouFredSel et script navigation par onglets

**amdawb** · 13/05/2014, 03h12

Bonjour,
J'ai un système de navigation par onglets à l'intérieur desquels il y a des carrousels animés par le plugin carouFredSel.
Mais seul le carrousel de l'onglet actif au chargement (ou au rafraîchissement) de la page est affiché,
et si je clique sur un autre onglet, j'ai pas de carrousel.

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
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
<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="content-type" content="text/html;charset=UTF-8" />
	<link href="style_onglets.css" rel="stylesheet" type="text/css"  />
	<link href="style_caroufredsel.css" rel="stylesheet" type="text/css"  />
	<script src="jquery-1.10.1.min.js" type="text/javascript" ></script> 
	<script src="onglets.js" type="text/javascript" ></script>
	<script src="jquery.carouFredSel-6.2.1.js"type="text/javascript" ></script>
	<script>
		$(function() {
			$('#foo1').carouFredSel({
				prev: '#prev1',
				next: '#next1',
				pagination: "#pager1"
			});
			$('#foo2').carouFredSel({
				prev: '#prev2',
				next: '#next2',
				pagination: "#pager2"
			});
		});
 
	</script>  
 
</head>
<body >
	<div class="bloc">
		<div class="title">
			<div class="tabs" id="tabs1">
				<a href="#onglet1">vidéos</a>
				<a href="#onglet2">Photo-galeries</a>
			</div>
		</div>
		<div class="content">
			<div id="onglet1">
				<div class="wrapper">
					<div class="list_carousel">
						<ul id="foo1">
							<li><img src="pix/01.png"></li><li><img src="pix/02.png"></li>
							<li><img src="pix/03.png"></li><li><img src="pix/04.png"></li>
							<li><img src="pix/05.png"></li><li><img src="pix/06.png"></li>
						</ul>
						<div class="controls_slide">
							<a id="prev1" class="prev" href="#"> << </a>
							<a id="next1" class="next" href="#"> >> </a>
							<div id="pager1" class="pager"></div>
						</div>
					</div>
				</div>
			</div>
			<div id="onglet2">
				<div class="wrapper">
					<div class="list_carousel">
						<ul id="foo2">
							<li><img src="pix/07.png"></li><li><img src="pix/08.png"></li>
							<li><img src="pix/09.png"></li><li><img src="pix/10.png"></li>
							<li><img src="pix/11.png"></li><li><img src="pix/12.png"></li>
						</ul>
						<div class="controls_slide">
							<a id="prev2" class="prev" href="#"> << </a>
							<a id="next2" class="next" href="#"> >> </a>
							<div id="pager2" class="pager"></div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
 
</body>
</html>

Le js des tabs:

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
jQuery(function($){
	var anchor = window.location.hash;
	$('.tabs').each(function(){
		var current = null;
		if(anchor !='' && $(this).find('a[href="'+anchor+'"]').length > 0){
			current = anchor;
		}else{
			current = $(this).find('a:first').attr('href');
		}
		$(this).find('a[href="'+current+'"]').addClass('active');
		$(current).siblings().hide();
		$(this).find('a').click(function(){
			var link = $(this).attr('href');
			if(link == current){
				return false;
			}else{
				$(this).siblings().removeClass('active');
				$(this).addClass('active');
				$(link).show().siblings().hide();
				current = link;
			}
		});
	});
});

Aucune erreur n'est visible sur la console de firebug.
Quelqu'un peut-il m'aider?
Merci.

**SpaceFrog** · 13/05/2014, 09h46

On ne peut pas parler de "conflit", mais plutöt de non initialisation.

Au chargement de la première page tu initialises le carrousel, mais il ne s'applique qu'aux éléments existants sur la page au moment de l'initialisation. Les onglets n'étant pas encore chargés, les éléments recevant le carrousel ne sont pas initialisés avec le carrousel.

Il va te falloir trouver le callback du load() afin d'initialiser les carrousel à ce moment là.

**amdawb** · 13/05/2014, 14h20

Envoyé par SpaceFrog

Il va te falloir trouver le callback du load() afin d'initialiser les carrousel à ce moment là.

Je n'y connais pas grand' chose en javascript pour tripoter dans carouFredSel-6.2.1, alors, votre aide me serais précieuse.
En attendant, je cherche un autre plugin de carrousel, espérant ne pas avoir le même problème en le combinant à une navigation en onglets qu'avec carouFredSel.

**SpaceFrog** · 13/05/2014, 14h49

ce n'est pas dasn le plugin de carrousel qu'il faut "trifouiller", mais dans ton plugin de navigation par onglet
il doit y avoir une fonction callback qui se lance àprès le chargement d'un onglet
c'est a ce moment là qu'il faut lancer le carrousel

**amdawb** · 13/05/2014, 17h04

le plugin de navigation par onglets que j'ai utilisé est tiré d'un tuto de grafikart(navigation par onglets) qui ne dispose pas de fonction de callback.
je penche sur le jQuery UI tabs,je pense qu'il gère lui les callbacks, sinon, je continue à voir d'autres plugins.

Merci pour l'info.

**SpaceFrog** · 13/05/2014, 17h16

dans le tuto si il y a un load() ... il y a un callback ...

Conflit entre carouFredSel et script navigation par onglets

jQuery

Vue hybride

Discussions similaires

Partager

Partager