Avoir 4 carousels utilisant jcarousel mais un seul s'affiche à la fois [Résolu]

ccsuperstar · 20/09/2011, 14h45

Bonjour à tous,

Je vous soumets mon problème d'aujourd'hui.
J'ai besoin de faire défiler une liste de produits dans un carrousel. Pour cela j'utilise jcarousel. Jusque là, tout se passe bien.
Et j'ai également l'existence de 4 onglets qui vont chacun afficher un carrousel différent.
Donc au chargement de la page seul un des 4 carrousels est visible, les autres sont en display:none. Et au clic sur un autre onglet, on masque le premier et on affiche le second.
Et c'est là que se pose mon problème. Lorsque j'active un autre carrousel, il ne s'affiche pas correctement. Alors que si à la base je les mets tous en display:block, ils sont touts bons, les liens précédents et suivants fonctionnent indépendamment les uns des autres.

Je ne comprends pas que juste un style css puisse faire marcher ou bugguer ce script.

Quelqu'un a t'il déjà été confronté à ça?

Merci pour vos retours.

SpaceFrog · 20/09/2011, 14h47

quand sont ils initialisés avec jquery ?

ccsuperstar · 20/09/2011, 14h53

J'ai une classe .mycarousel sur mes <ul>
J'appelle les fichiers js juste avant la fermeture de la balise body

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
 
// Carousel diapo
function mycarousel_initCallback(carousel) {
    // Disable autoscrolling if the user clicks the prev or next button.
    carousel.buttonNext.bind('click', function() {
        carousel.startAuto(0);
    });
 
    carousel.buttonPrev.bind('click', function() {
        carousel.startAuto(0);
    });
 
    // Pause autoscrolling if the user moves with the cursor over the clip.
    carousel.clip.hover(function() {
        carousel.stopAuto();
    }, function() {
        carousel.startAuto();
    });
 
    $('.mycarousel-next').bind('click', function(e) {
        e.preventDefault();
        carousel.next();
        return false;
 
    });
 
    $('.mycarousel-prev').bind('click', function(e) {
        e.preventDefault();
        carousel.prev();
        return false;
    });
};
$(document).ready(function () {
$(".mycarousel").jcarousel({
        start:1,
        offset:1,
        auto: 10,
        wrap: 'circular',
        itemFallbackDimension : 100,
        scroll: 3,
        easing: 'easeInSine',
        animation: 500,
        initCallback: mycarousel_initCallback,
        buttonNextHTML: null,
        buttonPrevHTML: null,
        itemFirstInCallback: {
            onAfterAnimation: mycarousel_itemFirstInCallback
        }
    });
    /*****************************
     * affichage des onglets et contenus
    *****************************/
    $("a.link_rub").live('click',function(e){ // ajout de l'evenement.
        e.preventDefault();
		var id_link = $(this).attr('id');
        $("a.link_rub").removeClass('on');
        $('#'+id_link).addClass('on');
		$('.content_prod_nati').css('display','none');
		$('#content_'+id_link).css('display','block');
	});
});
// Affichage des boutons prev/next
function mycarousel_itemFirstInCallback() {
    $('.mycarousel-prev').text('< PRECEDENT');
    $('.mycarousel-next').text('SUIVANT >');
};

SpaceFrog · 20/09/2011, 14h55

pas sur que

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

$(".mycarousel").jcarousel({

s'applique sur un element en display none ?

ccsuperstar · 20/09/2011, 15h17

L'élément en display none est la div parente

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
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
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
 
<div class="content_prod_nati" id="content_rub1" style="display:none;">
      <div class="action" style="display:block;"><a href="#" class="mycarousel-prev"></a><a href="#" class="mycarousel-next"></a></div>
            <ul id="mycarousel1" class="mycarousel jcarousel-skin-tango">
                <li>
                    <div class="produit">
                        <a href=""><img src="/medias_natiloo/img/photo_prod1.gif" alt="Prod 1" title="Prod 1" /></a>
                        <div class="infos_prod">
                            <a class="title_prod" href="">Prod 1 Page 1<br />Rubrique 1</a><br />
                            <span class="price_prod">29.00&euro;</span><span class="reduction_prod">-50%</span>
                        </div>
                    </div>
                    <div class="produit sous">
                        <a href=""><img src="/medias_natiloo/img/photo_prod4.gif" alt="Prod 4" title="Prod 4" /></a>
                        <div class="infos_prod">
                            <a class="title_prod" href="">Prod 4 Page 1<br />Rubrique 1</a><br />
                            <span class="price_prod">29.00&euro;</span><span class="reduction_prod">-50%</span>
                        </div>
                    </div>
                </li>
                <li>
                    <div class="produit">
                        <a href=""><img src="/medias_natiloo/img/photo_prod2.gif" alt="Prod 2" title="Prod 2" /></a>
                        <div class="infos_prod">
                            <a class="title_prod" href="">Prod 2 Page 1<br />Rubrique 1</a><br />
                            <span class="price_prod">29.00&euro;</span><span class="reduction_prod">-50%</span>
                        </div>
                    </div>
                    <div class="produit sous">
                        <a href=""><img src="/medias_natiloo/img/photo_prod5.gif" alt="Prod 5" title="Prod 5" /></a>
                        <div class="infos_prod">
                            <a class="title_prod" href="">Prod 5 Page 1<br />Rubrique 1</a><br />
                            <span class="price_prod">29.00&euro;</span><span class="reduction_prod">-50%</span>
                        </div>
                    </div>
                </li>
                <li>
                    <div class="produit">
                        <a href=""><img src="/medias_natiloo/img/photo_prod3.gif" alt="Prod 3" title="Prod 3" /></a>
                        <div class="infos_prod">
                            <a class="title_prod" href="">Prod 3 Page 1<br />Rubrique 1</a><br />
                            <span class="price_prod">29.00&euro;</span><span class="reduction_prod">-50%</span>
                        </div>
                    </div>
                    <div class="produit sous">
                        <a href=""><img src="/medias_natiloo/img/photo_prod6.gif" alt="Prod 6" title="Prod 6" /></a>
                        <div class="infos_prod">
                            <a class="title_prod" href="">Prod 6 Page 1<br />Rubrique 1</a><br />
                            <span class="price_prod">29.00&euro;</span><span class="reduction_prod">-50%</span>
                        </div>
                    </div>
                </li>
                <li>
                    <div class="produit">
                        <a href=""><img src="/medias_natiloo/img/photo_prod1.gif" alt="Prod 1" title="Prod 1" /></a>
                        <div class="infos_prod">
                            <a class="title_prod" href="">Prod 1 Page 2<br />Rubrique 1</a><br />
                            <span class="price_prod">29.00&euro;</span><span class="reduction_prod">-50%</span>
                        </div>
                    </div>
                    <div class="produit sous">
                        <a href=""><img src="/medias_natiloo/img/photo_prod4.gif" alt="Prod 4" title="Prod 4" /></a>
                        <div class="infos_prod">
                            <a class="title_prod" href="">Prod 4 Page 2<br />Rubrique 1</a><br />
                            <span class="price_prod">29.00&euro;</span><span class="reduction_prod">-50%</span>
                        </div>
                    </div>
                </li>
                <li>
                    <div class="produit">
                        <a href=""><img src="/medias_natiloo/img/photo_prod2.gif" alt="Prod 2" title="Prod 2" /></a>
                        <div class="infos_prod">
                            <a class="title_prod" href="">Prod 2 Page 2<br />Rubrique 1</a><br />
                            <span class="price_prod">29.00&euro;</span><span class="reduction_prod">-50%</span>
                        </div>
                    </div>
                    <div class="produit sous">
                        <a href=""><img src="/medias_natiloo/img/photo_prod5.gif" alt="Prod 5" title="Prod 5" /></a>
                        <div class="infos_prod">
                            <a class="title_prod" href="">Prod 5 Page 2<br />Rubrique 1</a><br />
                            <span class="price_prod">29.00&euro;</span><span class="reduction_prod">-50%</span>
                        </div>
                    </div>
                </li>
                <li>
                    <div class="produit">
                        <a href=""><img src="/medias_natiloo/img/photo_prod3.gif" alt="Prod 3" title="Prod 3" /></a>
                        <div class="infos_prod">
                            <a class="title_prod" href="">Prod 3 Page 2<br />Rubrique 1</a><br />
                            <span class="price_prod">29.00&euro;</span><span class="reduction_prod">-50%</span>
                        </div>
                    </div>
                    <div class="produit sous">
                        <a href=""><img src="/medias_natiloo/img/photo_prod6.gif" alt="Prod 6" title="Prod 6" /></a>
                        <div class="infos_prod">
                            <a class="title_prod" href="">Prod 6 Page 2<br />Rubrique 1</a><br />
                            <span class="price_prod">29.00&euro;</span><span class="reduction_prod">-50%</span>
                        </div>
                    </div>
                </li>
                <li>
                    <div class="produit">
                        <a href=""><img src="/medias_natiloo/img/photo_prod1.gif" alt="Prod 1" title="Prod 1" /></a>
                        <div class="infos_prod">
                            <a class="title_prod" href="">Prod 1 Page 3<br />Rubrique 1</a><br />
                            <span class="price_prod">29.00&euro;</span><span class="reduction_prod">-50%</span>
                        </div>
                    </div>
                    <div class="produit sous">
                        <a href=""><img src="/medias_natiloo/img/photo_prod4.gif" alt="Prod 4" title="Prod 4" /></a>
                        <div class="infos_prod">
                            <a class="title_prod" href="">Prod 4 Page 3<br />Rubrique 1</a><br />
                            <span class="price_prod">29.00&euro;</span><span class="reduction_prod">-50%</span>
                        </div>
                    </div>
                </li>
                <li>
                    <div class="produit">
                        <a href=""><img src="/medias_natiloo/img/photo_prod2.gif" alt="Prod 2" title="Prod 2" /></a>
                        <div class="infos_prod">
                            <a class="title_prod" href="">Prod 2 Page 3<br />Rubrique 1</a><br />
                            <span class="price_prod">29.00&euro;</span><span class="reduction_prod">-50%</span>
                        </div>
                    </div>
                    <div class="produit sous">
                        <a href=""><img src="/medias_natiloo/img/photo_prod5.gif" alt="Prod 5" title="Prod 5" /></a>
                        <div class="infos_prod">
                            <a class="title_prod" href="">Prod 5 Page 3<br />Rubrique 1</a><br />
                            <span class="price_prod">29.00&euro;</span><span class="reduction_prod">-50%</span>
                        </div>
                    </div>
                </li>
                <li>
                    <div class="produit">
                        <a href=""><img src="/medias_natiloo/img/photo_prod3.gif" alt="Prod 3" title="Prod 3" /></a>
                        <div class="infos_prod">
                            <a class="title_prod" href="">Prod 3 Page 3<br />Rubrique 1</a><br />
                            <span class="price_prod">29.00&euro;</span><span class="reduction_prod">-50%</span>
                        </div>
                    </div>
                    <div class="produit sous">
                        <a href=""><img src="/medias_natiloo/img/photo_prod6.gif" alt="Prod 6" title="Prod 6" /></a>
                        <div class="infos_prod">
                            <a class="title_prod" href="">Prod 6 Page 3<br />Rubrique 1</a><br />
                            <span class="price_prod">29.00&euro;</span><span class="reduction_prod">-50%</span>
                        </div>
                    </div>
                </li>
            </ul>
          </div>

Il y en a 4 en tout comme ceci

SpaceFrog · 20/09/2011, 15h29

reinitialise le plugin juste après avoir modifié le display ?

ou modifie le display à none juste après avoir affecté le plugin ?

ccsuperstar · 20/09/2011, 15h39

Ah oui je vois!!! Effectivement en lançant les 4 en même temps ils tournaient tous sans que je les vois.
Je refais l'initialisation au moment du clic sur l'onglet c'est ça?

Merci beaucoup!!

20/09/2011, 14h45	#1
ccsuperstar Invité de passage Inscription : février 2007 Messages : 32 Détails du profil Informations forums : Inscription : février 2007 Messages : 32 Points : 4 Points : 4	Avoir 4 carousels utilisant jcarousel mais un seul s'affiche à la fois Bonjour à tous, Je vous soumets mon problème d'aujourd'hui. J'ai besoin de faire défiler une liste de produits dans un carrousel. Pour cela j'utilise jcarousel. Jusque là, tout se passe bien. Et j'ai également l'existence de 4 onglets qui vont chacun afficher un carrousel différent. Donc au chargement de la page seul un des 4 carrousels est visible, les autres sont en display:none. Et au clic sur un autre onglet, on masque le premier et on affiche le second. Et c'est là que se pose mon problème. Lorsque j'active un autre carrousel, il ne s'affiche pas correctement. Alors que si à la base je les mets tous en display:block, ils sont touts bons, les liens précédents et suivants fonctionnent indépendamment les uns des autres. Je ne comprends pas que juste un style css puisse faire marcher ou bugguer ce script. Quelqu'un a t'il déjà été confronté à ça? Merci pour vos retours.
	00

20/09/2011, 14h47	#2
SpaceFrog Rédacteur/Modérateur Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur Inscription : mars 2002 Messages : 30 040 Détails du profil Informations personnelles : Sexe : Localisation : Royaume-Uni Informations professionnelles : Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur Secteur : Industrie Informations forums : Inscription : mars 2002 Messages : 30 040 Points : 45 141 Points : 45 141	quand sont ils initialisés avec jquery ? __________________ Ma page Developpez Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts) Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir... Votre post est résolu ? Alors n'oubliez pas le Tag réalisations :www.planet-languages.com\|www.saftair.com\| www.ouestisol.fr \| www.sebemex.fr \| www.extramiante.fr \| www.sistac-alizay.fr \| www.acoustishop.fr \| www.litt.fr \| www.ouestventil.fr
	00

20/09/2011, 14h55	#4
SpaceFrog Rédacteur/Modérateur Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur Inscription : mars 2002 Messages : 30 040 Détails du profil Informations personnelles : Sexe : Localisation : Royaume-Uni Informations professionnelles : Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur Secteur : Industrie Informations forums : Inscription : mars 2002 Messages : 30 040 Points : 45 141 Points : 45 141	pas sur que Code : Sélectionner tout - Visualiser dans une fenêtre à part $(".mycarousel").jcarousel({ s'applique sur un element en display none ? __________________ Ma page Developpez Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts) Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir... Votre post est résolu ? Alors n'oubliez pas le Tag réalisations :www.planet-languages.com\|www.saftair.com\| www.ouestisol.fr \| www.sebemex.fr \| www.extramiante.fr \| www.sistac-alizay.fr \| www.acoustishop.fr \| www.litt.fr \| www.ouestventil.fr
	00

20/09/2011, 15h29	#6
SpaceFrog Rédacteur/Modérateur Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur Inscription : mars 2002 Messages : 30 040 Détails du profil Informations personnelles : Sexe : Localisation : Royaume-Uni Informations professionnelles : Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur Secteur : Industrie Informations forums : Inscription : mars 2002 Messages : 30 040 Points : 45 141 Points : 45 141	reinitialise le plugin juste après avoir modifié le display ? ou modifie le display à none juste après avoir affecté le plugin ? __________________ Ma page Developpez Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts) Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir... Votre post est résolu ? Alors n'oubliez pas le Tag réalisations :www.planet-languages.com\|www.saftair.com\| www.ouestisol.fr \| www.sebemex.fr \| www.extramiante.fr \| www.sistac-alizay.fr \| www.acoustishop.fr \| www.litt.fr \| www.ouestventil.fr
	00

20/09/2011, 15h39	#7
ccsuperstar Invité de passage Inscription : février 2007 Messages : 32 Détails du profil Informations forums : Inscription : février 2007 Messages : 32 Points : 4 Points : 4	Ah oui je vois!!! Effectivement en lançant les 4 en même temps ils tournaient tous sans que je les vois. Je refais l'initialisation au moment du clic sur l'onglet c'est ça? Merci beaucoup!!
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email