Acoordéon automatique en V1.12

**schwarzy2** · 27/09/2010, 15h23

Bonjour à tous,

j'ai un accordéon d'images qui lorsqu'on clique dessus s'affichent, et j'ai besoin de les faire apparaître au fur et à mesure, comme si l'accordéon s'automatisait. Je précise qu'il s'agit d'un site Joomla, j'utilise donc la version 1.12 de Mootools.
Je veux donc faire apparaître successivement mon image 0 puis 1 puis 2 et ainsi de suite jusqu'à mon image 5, sans que l'internaute ait à cliquer dessus.
Mon code a l'air de fonctionner, mais il n'effectue en fait qu'une seule transition,ainsi j'ai l'image 4 qui s'affiche (c'est celle de départ), puis l'image 0.
Je n'ai pas 4 puis 0 puis 1 puis 2 puis 3 etc.
Mais quand je suis mon code en affichant des alert, je vois pourtant certaines div disparaître, d'autres apparaître, c'est comme si mes images n'avaient juste pas le temps de s'afficher.
Voici mon code:

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
window.addEvent('domready', function(){
 
    var szSmall = 41, szFull = 727;
    var accordion = $$("#accordion .stretcher");
 
    var fx = new Fx.Elements(accordion, {wait: true, duration: 3000, transition: Fx.Transitions.Expo.easeInOut
                                                        }
);
 
    accordion.each(function(stretcher, i) {
        stretcher.addEvent("click", function(event) {
            var o = {};
            o[i] = {width: [stretcher.getStyle("width").toInt(), szFull]}
 
            toglers = stretcher.getElementsByTagName("img");
 
            if (toglers[0].style.visibility == "hidden") {
                toglers[0].style.visibility = "visible";
                toglers[1].style.visibility = "hidden";
            }
            accordion.each(function(other, j) {
                if(i != j) {
                    var w = other.getStyle("width").toInt();
                    if(w != szSmall) o[j] = {width: [w, szSmall]};
                toglers = other.getElementsByTagName("img");
                toglers[1].style.visibility = "visible";
                toglers[0].style.visibility = "hidden"; 
                }
            });
            fx.start(o);
        });  //end of stretcher.addEvent on click    
 
 
        var m = {};
        m[i] = {width: [stretcher.getStyle("width").toInt(), szFull]}
 
        toglers = stretcher.getElementsByTagName("img");
 
        if (toglers[0].style.visibility == "hidden") {
            toglers[0].style.visibility = "visible";
            toglers[1].style.visibility = "hidden";
        }
 
        accordion.each(function(other, j) {    
            if(i != j) {
                var w = other.getStyle("width").toInt();
                if(w != szSmall) m[j] = {width: [w, szSmall]};
            toglers = other.getElementsByTagName("img");
            toglers[1].style.visibility = "visible";
            toglers[0].style.visibility = "hidden"; 
            }
        });
        fx.start(m);
        alert(i);
    }); //end of accordion.each 
 
 
});    //end of domready

Lorsque je modifie mon paramètre wait et que je le passe à false, en modifiant la ligne comme suit:

Code :

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

1
2
3
var fx = new Fx.Elements(accordion, {wait: false, duration: 3000, transition: Fx.Transitions.Expo.easeInOut
                                                        }
);

Je n'ai toujours qu'une transition mais c'est de mon image 4 à mon image 5...
L'un de vous aurait-il une idée sur ce que je peux faire donner à mes images le temps de s'afficher? Ai-je au moins bien analyser le problème?

Voici le lien sur mon site:http://zakor.dyndns.org/PortailCFA

En remerciant par avance toute personne qui voudrait bien m'aider...

Cordialement

schwarzy2

**vermine** · 28/09/2010, 07h57

Bonjour,

Avec les firewall et compagnie, je n'ai pas accès à votre page. Pourriez-vous me donner le code HTML concerné s'il vous plait ? Ca me permettra de faire des tests.

Je vois en tout cas que vous faites plusieurs start mais que vous n'en arrêtez aucun. Donc vous risquez d'en avoir deux en parallèle.

**schwarzy2** · 28/09/2010, 09h58

Bonjour,

merci de bien vouloir se pencher sur mon problème!
tu me dis que j'ai deux start en même temps : comment puis-je faire pour ne lancer l'un qu'une fois l'autre terminé stp?
Normalement vu que j'attends 5 s entre chaque transition et que cette durée est inférieure au temps mis à la transition, je ne devrais pas les avoir en même temps...,si?
voici mon code HTML:

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
                       <ul id="accordion">
    <li>
        <div class="stretcher" style="width: 727px;"><img src="images/stories/img_slides/charpenteORANGE.png" alt="Onglet selectionné de l'apprentissage CHARPENTE d'1 des 3 BTP CFA Picardie:BTP CFA de Laon en Aisne 02, BTP CFA d'Agnetz en Oise 60, BTP CFA d'Amiens en Somme 80." class="tab"  /> <img src="images/stories/img_slides/charpenteGREY.png" alt="Onglet non selectionne de l'apprentissage CHARPENTE d'1 des 3 BTP CFA Picardie:BTP CFA de Laon en Aisne 02, BTP CFA d'Agnetz en Oise 60, BTP CFA d'Amiens en Somme 80." class="tab" style="visibility: hidden;"/>
            <div style="padding-left: 41px;"><a href="Apprentissage-BTP-CFA-Picardie/apprentissage-charpentier.html"><img src="images/stories/img_slides/slide_im_1.jpg" alt="Apprentissage charpentier ; Formation Batiment dans un centre de formation d'apprentis du batiment en Picardie: CFA Bâtiment d'Agnetz en Oise, Cfa Bâtiment d'Amiens en Somme et CFA Bâtiment de Laon en Aisne. " title="jeune apprenti charpentier en apprentissage dans l'un des trois BTP CFA Picardie" class="img" /></a></div>
        </div>
    </li>
    <li>
        <div class="stretcher"><img src="images/stories/img_slides/electriciteORANGE.png" alt="Onglet selectionné de l'apprentissage ELECTRICITE d'1 des 3 BTP CFA Picardie:BTP CFA de Laon en Aisne 02, BTP CFA d'Agnetz en Oise 60, BTP CFA d'Amiens en Somme 80." class="tab" style="visibility: hidden;" /> <img src="images/stories/img_slides/electriciteGREY.png" alt="Onglet non selectionné de l'apprentissage ELECTRICITE d'1 des 3 BTP CFA Picardie:BTP CFA de Laon en Aisne 02, BTP CFA d'Agnetz en Oise 60, BTP CFA d'Amiens en Somme 80." class="tab" />
            <div style="padding-left: 41px;"><a href="Apprentissage-BTP-CFA-Picardie/apprentissage-electricien.html"><img src="images/stories/img_slides/slide_im_2.jpg" alt="Apprentissage electricien ; Formation Batiment dans un centre de formation d'apprentis du batiment en Picardie: CFA Bâtiment d'Agnetz en Oise, Cfa Bâtiment d'Amiens en Somme et CFA Bâtiment de Laon en Aisne. " title="jeune apprenti électricien en apprentissage dans l'un des trois BTP CFA Picards" class="img" /></a></div>
        </div>
    </li>
    <li>
        <div class="stretcher"><img src="images/stories/img_slides/carrelageORANGE.png" alt="Onglet selectionné de l'apprentissage CARRELAGE d'1 des 3 BTP CFA Picardie:BTP CFA de Laon en Aisne 02, BTP CFA d'Agnetz en Oise 60, BTP CFA d'Amiens en Somme 80." class="tab" style="visibility: hidden;" /> <img src="images/stories/img_slides/carrelageGREY.png" alt="Onglet non selectionné de l'apprentissage CARRELAGE d'1 des 3 BTP CFA Picardie:BTP CFA de Laon en Aisne 02, BTP CFA d'Agnetz en Oise 60, BTP CFA d'Amiens en Somme 80." class="tab" />
            <div style="padding-left: 41px;"><a href="Apprentissage-BTP-CFA-Picardie/apprentissage-carreleur.html"><img src="images/stories/img_slides/slide_im_4.jpg" alt="Apprentissage carreleur ; Formation Batiment dans un centre de formation d'apprentis du batiment en Picardie: CFA Bâtiment d'Agnetz en Oise, Cfa Bâtiment d'Amiens en Somme et CFA Bâtiment de Laon en Aisne. " title="apprenti carreleur-mosaïste en apprentissage dans l'un des trois BTP CFA Picards" class="img" /></a></div>
        </div>
    </li>
    <li>
        <div class="stretcher"><img src="images/stories/img_slides/travauxPublicsORANGE.png" alt="Onglet selectionné de l'apprentissage TRAVAUX PUBLICS d'1 des 3 BTP CFA Picardie:BTP CFA de Laon en Aisne 02, BTP CFA d'Agnetz en Oise 60, BTP CFA d'Amiens en Somme 80." class="tab" style="visibility: hidden;" /> <img src="images/stories/img_slides/travauxPublicsGREY.png" alt="Onglet non selectionné de l'apprentissage TRAVAUX PUBLICS d'1 des 3 BTP CFA Picardie:BTP CFA de Laon en Aisne 02, BTP CFA d'Agnetz en Oise 60, BTP CFA d'Amiens en Somme 80." class="tab" />
            <div style="padding-left: 41px;"><a href="Apprentissage-BTP-CFA-Picardie/apprentissage-tp.html"><img src="images/stories/img_slides/slide_im_3.jpg" alt="Apprentissage conducteur d'engins ; Formation Batiment dans un centre de formation d'apprentis du batiment en Picardie: CFA Bâtiment d'Agnetz en Oise, Cfa Bâtiment d'Amiens en Somme et CFA Bâtiment de Laon en Aisne." title="jeune apprenti conducteur d'engins en apprentissage dans l'un des trois BTP CFA Picards" class="img" /></a></div>
        </div>
    </li>
    <li>
        <div class="stretcher"><img src="images/stories/img_slides/couvertureORANGE.png" alt="Onglet selectionné de l'apprentissage COUVERTURE d'1 des 3 BTP CFA Picardie:BTP CFA de Laon en Aisne 02, BTP CFA d'Agnetz en Oise 60, BTP CFA d'Amiens en Somme 80.." class="tab" style="visibility: hidden;" /> <img src="images/stories/img_slides/couvertureGrey.png" alt="Onglet non selectionné de l'apprentissage COUVERTURE d'1 des 3 BTP CFA Picardie:BTP CFA de Laon en Aisne 02, BTP CFA d'Agnetz en Oise 60, BTP CFA d'Amiens en Somme 80." class="tab" />
            <div style="padding-left: 41px;"><a href="Apprentissage-BTP-CFA-Picardie/apprentissage-couvreur.html"><img src="images/stories/img_slides/slide_im_6.jpg" alt="Apprentissage couvreur ; Formation Batiment dans un centre de formation d'apprentis du batiment en Picardie: CFA Bâtiment d'Agnetz en Oise, Cfa Bâtiment d'Amiens en Somme et CFA Bâtiment de Laon en Aisne. " title="jeune apprenti couvreur en apprentissage dans l'un des trois BTP CFA Picards" class="img" /></a></div>
        </div>
    </li>
    <li>
        <div class="stretcher" ><img src="images/stories/img_slides/metallerieORANGE.png" alt="Onglet selectionné de l'apprentissage METALLERIE d'1 des 3 BTP CFA Picardie:BTP CFA de Laon en Aisne 02, BTP CFA d'Agnetz en Oise 60, BTP CFA d'Amiens en Somme 80." class="tab" style="visibility: hidden;" /> <img src="images/stories/img_slides/metallerieGREY.png" alt="Onglet non selectionné de l'apprentissage METALLERIE d'1 des 3 BTP CFA Picardie:BTP CFA de Laon en Aisne 02, BTP CFA d'Agnetz en Oise 60, BTP CFA d'Amiens en Somme 80." class="tab" />
            <div style="padding-left: 41px;"><a href="Apprentissage-BTP-CFA-Picardie/apprentissage-metallier-apprentissage-serrurier.html"><img src="images/stories/img_slides/slide_im_5.jpg" alt="Apprentissage metallier ; Formation Batiment dans un centre de formation d'apprentis du batiment en Picardie: CFA Bâtiment d'Agnetz en Oise, Cfa Bâtiment d'Amiens en Somme et CFA Bâtiment de Laon en Aisne." title="jeune apprenti métallier en apprentissage dans l'un des trois BTP CFA Picards" class="img" /></a></div>
        </div>
    </li>
</ul>

merci d'avance!

**vermine** · 28/09/2010, 12h16

C'est quoi other ?

**schwarzy2** · 28/09/2010, 14h13

other définit toutes les div de classe stretcher.
J'ai contourné mon problème avec ce code, mais je ne comprend quand même pas pourquoi mon premier code ne marchait pas...

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
 
var szSmall = 41, szFull = 727;
var accordion = $$("#accordion .stretcher");
 
var fx2 = new Fx.Elements(accordion, {wait: true,fps:5, duration: 1000, transition: Fx.Transitions.Expo.easeInOut,onComplete: function(){                                                                                                          for(i=1;i<5;i++){                                                                                                      if(accordion[i].getStyle("width").toInt()==727){
                                                                                                          var nveli=i+1;                 }    }                                                                                                   test(nveli);
                                                                                                                                    }
                                                        }
);
 
    var test=function(l){
        var m = {};
        m[l] = {width: [accordion[l].getStyle("width").toInt(), szFull]}
        //alert(stretcher.getStyle("width").toInt());
        toglers = accordion[l].getElementsByTagName("img");
 
        if (toglers[0].style.visibility == "hidden") {
            toglers[0].style.visibility = "visible";
            toglers[1].style.visibility = "hidden";
        }
 
        accordion.each(function(other, j) {    
            if(l != j) {
                var w = other.getStyle("width").toInt();
                if(w != szSmall) m[j] = {width: [w, szSmall]};
            toglers = other.getElementsByTagName("img");
            toglers[1].style.visibility = "visible";
            toglers[0].style.visibility = "hidden"; 
            }
        });
        fx2.start(m);
    }
 
    test(1);