IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

jQuery Discussion :

Avoir 4 carousels utilisant jcarousel mais un seul s'affiche à la fois


Sujet :

jQuery

  1. #1
    Membre à l'essai
    Profil pro
    Inscrit en
    Février 2007
    Messages
    32
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Février 2007
    Messages : 32
    Points : 19
    Points
    19
    Par défaut 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.

  2. #2
    Rédacteur/Modérateur

    Avatar de SpaceFrog
    Homme Profil pro
    Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Inscrit en
    Mars 2002
    Messages
    39 640
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 74
    Localisation : Royaume-Uni

    Informations professionnelles :
    Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Secteur : Industrie

    Informations forums :
    Inscription : Mars 2002
    Messages : 39 640
    Points : 66 669
    Points
    66 669
    Billets dans le blog
    1
    Par défaut
    quand sont ils initialisés avec jquery ?
    Ma page Developpez - Mon Blog 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

    Venez sur le Chat de Développez !

  3. #3
    Membre à l'essai
    Profil pro
    Inscrit en
    Février 2007
    Messages
    32
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Février 2007
    Messages : 32
    Points : 19
    Points
    19
    Par défaut
    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 >');
    };

  4. #4
    Rédacteur/Modérateur

    Avatar de SpaceFrog
    Homme Profil pro
    Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Inscrit en
    Mars 2002
    Messages
    39 640
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 74
    Localisation : Royaume-Uni

    Informations professionnelles :
    Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Secteur : Industrie

    Informations forums :
    Inscription : Mars 2002
    Messages : 39 640
    Points : 66 669
    Points
    66 669
    Billets dans le blog
    1
    Par défaut
    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 - Mon Blog 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

    Venez sur le Chat de Développez !

  5. #5
    Membre à l'essai
    Profil pro
    Inscrit en
    Février 2007
    Messages
    32
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Février 2007
    Messages : 32
    Points : 19
    Points
    19
    Par défaut
    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

  6. #6
    Rédacteur/Modérateur

    Avatar de SpaceFrog
    Homme Profil pro
    Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Inscrit en
    Mars 2002
    Messages
    39 640
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 74
    Localisation : Royaume-Uni

    Informations professionnelles :
    Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Secteur : Industrie

    Informations forums :
    Inscription : Mars 2002
    Messages : 39 640
    Points : 66 669
    Points
    66 669
    Billets dans le blog
    1
    Par défaut
    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 - Mon Blog 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

    Venez sur le Chat de Développez !

  7. #7
    Membre à l'essai
    Profil pro
    Inscrit en
    Février 2007
    Messages
    32
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Février 2007
    Messages : 32
    Points : 19
    Points
    19
    Par défaut
    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!!

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. Avoir 5 div mais 1 seule qui charge de façon aléatoire
    Par theophile76 dans le forum Général JavaScript
    Réponses: 6
    Dernier message: 21/03/2013, 00h56
  2. Réponses: 2
    Dernier message: 28/05/2007, 13h15
  3. Deux progs équivalents mais un seul qui marche
    Par stokastik dans le forum SDL
    Réponses: 3
    Dernier message: 21/08/2006, 18h48
  4. Avoir un champ qui se decremente tout seul
    Par romeo9423 dans le forum PostgreSQL
    Réponses: 1
    Dernier message: 15/02/2005, 04h32

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo