plugin jquery, bug

Bonjour,

J'ai commencé à écrire un plugin jquery et malheureusement, celui-ci ne fonctionne seulement si je l'appelle deux fois.
le plugin carrousel fonctionne bien, le plugin galerie seulement si il est appelé deux fois.
J'avoue avoir de la peine à comprendre l'ordre d'exécution des fonctions javascript…
Si quelqu'un a une petite piste c'est avec plaisir, je cherche depuis des heures et ça devient une obsession :oops:

Merci beaucoup à tous.
Très bonne journée.

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
59
60
61
62
63
64
 
$(document).ready(function(){ 	// le document est chargé
   $(".navigation .toggleSubMenu.galerie ul a").click(function(){ 	// on selectionne tous les liens et on définit une action quand on clique dessus
 
        var page=($(this).attr("href")); // on recuperer l' adresse du lien
	$.ajax({
            url: page, // url de la page à charger
            cache: false,
            success:function(html){
                    afficher(html);
                    $("#galerie").pluginCarrousel();
                    $("#galerie").pluginGalerie();
                    $("#galerie").pluginGalerie();
            },
            error:function(XMLHttpRequest, textStatus, errorThrows){ // erreur durant la requete
            }
	});
	return false; // on desactive le lien
   });
});
 
 
function afficher(donnes){
    $("#page_content").empty(); // on vide le div
    $("#rotate").remove();
    $("#page_content").append(donnes);
 
    $("#conteneur").css('height','612px');
    $("#conteneur").css('width','940px');
 
    $("#galerie").css('height','688px');
    $('#galerie').css('overflow','hidden');
 
    $("#page_content").css({"float":"left"});
    $("#page_content").css({"width":"940px"});
 
 
    //------------------------------- transformation du menu pour la galerie ----------------------------------------
    $("#menu").css({"background-color":"rgb(240,240,240)"});
    $("#menu").append('<h3 id=rotate>menu</h3>');
    $("#rotate").hide();
    $("#rotate").css({
        'width' : '30px',
        'margin-top' : '40px',
        '-moz-transform' : 'rotate(-90deg)',
        '-webkit-transform' : 'rotate(-90deg)',
        '-o-transform' : 'rotate(-90deg)'
    });
 
    $("#menu").mouseover(function(){
        $("#rotate").hide();
        $(this).css({
            'padding-top' : '20px',
            'padding-right' : '20px',
            'padding-bottom' : '20px'
        });
        $(this).children('ul').show();
    });
    $("#menu").mouseout(function(){
        $(this).children('ul').hide();
        $(this).css({'padding': '0px'});
        $("#rotate").show();
    });
}

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
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
 
(function($)
{       
        /**
         * @param options
         *  classCarrousel : la class du slider à creer
         *  idCarrousel : l'id du slider à creer
         */
	$.fn.pluginCarrousel=function(options)
	{           
           //On définit nos paramètres par défaut
           var defauts=
           {
               'classCarrousel': 'carrousel',
               'idCarrousel': 'thumbs',
               'nbElementsAffiche' : 11,
               'delai' : 500,
               'fadeIn' :500,
               'callback' : null
           };  
 
           // fusion des parametres
           var parametres=$.extend(defauts, options);
 
           return this.each(function()
	   {
           // ------------------------------- début du plugin ---------------------------------------------------------
               $(this).children('.categorie').hide();
               $(this).after('<ul class='+parametres.classCarrousel+' id='+parametres.idCarrousel+'></ul>');
               // pour tous les liens, on les copie vers le slider
               var lien = $(this).find('a');
               $(lien).each(function(){
                   $('#'+parametres.idCarrousel).append($(this).clone());
               });
               $('#'+parametres.idCarrousel).find('a').wrap('<li></li>');
 
               // Element de référence pour la zone de visualisation (ici le premier item)
               var Reference = $('.'+parametres.classCarrousel+' li:first-child');
               // Nombre d'éléments de la liste
               var NbElement = $('.'+parametres.classCarrousel+' li').length;
 
               // Englobage de la liste par la zone de visualisation
               $('.'+parametres.classCarrousel).wrap('<div class="carrousel-conteneur"></div>');
               // Englobage de la liste de visualisation et des boutons
               $(".carrousel-conteneur").wrap('<div class="placement-carrousel"></div>');
               $(".placement-carrousel").hide();
               // Application d'une largeur à la bande de diapositive afin de conserver une structrure horizontale
               $('.'+parametres.classCarrousel).css("width", (Reference.width() * NbElement) );
               //remettre à 0 le margin si on recharge une autre catégorie
               $('.'+parametres.classCarrousel).css("margin-left","0px");
 
                // Ciblage de la zone de visualisation largeur hauteur
                $(".carrousel-conteneur")
                    .width(  Reference.width() * parametres.nbElementsAffiche)
                    .height( Reference.height() )
                    // Blocage des débordements
                    .css("overflow", "hidden")
                    .css("margin-left","auto")
                    .css("margin-right","auto");
 
                // Insertion des boutons de navigation
                if(NbElement>parametres.nbElementsAffiche)
                {
                    $(".placement-carrousel").append(''
                        +    '<ul class="carrousel-pagination">'
                        +    '    <li class="carrousel-prev"><button type="button"></button></li>'
                        +    '    <li class="carrousel-next"><button type="button"></button></li>'
                        +    '</ul>'
                        +    '');
                }
 
                // si la fonction anonyme call back est défini, on l'appelle
                if(parametres.callback)
                {   
                    parametres.callback($(this))
                }
                $(".placement-carrousel").delay(parametres.delai).fadeIn(parametres.fadeIn);
 
                // -------------------------- gestion des click ------------------------------------------------
                var cpt=0;
                $(".carrousel-next button").click(function() {
                    if((NbElement-cpt)>parametres.nbElementsAffiche) {
                        cpt++;
                        $(".carrousel").animate({
                            marginLeft : - (Reference.width() * cpt)
                        },250);
                    }
                });
                $(".carrousel-prev button").click(function() {
                    if(cpt > 0) {
                        cpt--;
                        $(".carrousel").animate({
                            marginLeft : - (Reference.width() * cpt)
                        },250);
                    }
                });
               // -------------------------- Fin de gestion des click ------------------------------------------------
 
           // ------------------------------- fin du plugin ---------------------------------------------------------
 
 
	   });						   
	};
})(jQuery);

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
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
 
(function($)
{       
       /** renvoie tous les objet jquery pour permettre le chainage
        *  @param options est un objet litteral
        */
	$.fn.pluginGalerie = function(options)
	{
 
            // définit les paramètres par défauts
            var defauts =
            {   
                'thumbListId': "thumbs", // liste des liens pour le menu galerie
                'imgViewerId': "viewer",
                'activeClass': "active",
                'activeTitle': "Photo en cours de visualisation",
                'loaderTitle': "Chargement en cours",
                'loaderImage': "images/loader/loader.gif"
            }
            // on fusionne les paramètre d'entrées
            var parametres = $.extend(defauts, options);
 
            return this.each(function()
            {
            // ------------------------------- début du plugin ---------------------------------------------------------
              var thumbLinks = $("#"+parametres.thumbListId).find("a"),
                firstThumbLink = thumbLinks.eq(0),
                highlight = function(elt){
                  thumbLinks.removeClass(parametres.activeClass).removeAttr("title");
                  elt.addClass(parametres.activeClass).attr("title",parametres.activeTitle);
                },
                loader = $(document.createElement("img")).attr({
                  alt: parametres.loaderTitle,
                  title: parametres.loaderTitle,
                  src: parametres.loaderImage
                });
 
              highlight(firstThumbLink);
 
 
 
 
                var box = $('<p></p>').attr("id",parametres.imgViewerId).append($('<img />').attr({alt: "", src: firstThumbLink.attr("href")}));
                box.insertBefore('.legende_loader');
 
 
 
              var imgViewer = $("#"+parametres.imgViewerId),
                bigPic = imgViewer.children("img");
 
              thumbLinks.click(function(e){
                  e.preventDefault();
                  var $this = $(this),
                    target = $this.attr("href");
                  if (bigPic.attr("src") == target) return;
                  highlight($this);
                  imgViewer.html(loader);
                  bigPic
                    .load(function(){
                        // évite le bug -> utilisateur click avant la fin de l'anim sur l'image suivante
                        bigPic.stop().css({"opacity":"1"});
                        imgViewer.html($(this).fadeIn(650));
                    })
                    .attr("src",target);
 
                    // index vaut la valeur de la photo
                    var index = thumbLinks.index($this);
                    // on charge la légende qui correspond à la photo clické
                    // chargerLegende(pCategorie, index);
 
                });
 
                   // ------------------------------- affichage de la légende ---------------------------------------------------------
 
                    $('#galerie').append('<div class="legende_loader"><button id=slideButton></button><p></p></div>');
 
                    var legendeAffiche=true;
 
                    $(".legende_loader button").click(function() {
                        if(legendeAffiche){
                            rentreLegende();
                            legendeAffiche=false;
                        }
                        else{
                            afficheLegende();
                            legendeAffiche=true;
                        }
                    });
 
 
                    alert("findu plugin");
 
 
 
 
            // ------------------------------- fin du plugin ---------------------------------------------------------
            });						   
	};
})(jQuery);
 
 
 
 
// fonction pour charger la bonne légende
function chargerLegende(pCategorie, pIndexLegende){
    // on insère la légende dans la galerie
    var elementListe = pCategorie.children('dl').eq(pIndexLegende).children('dt').text();
    $('.legende_loader').children('p').html(elementListe);
}
 
// affiche légende avec animation
function afficheLegende() {
        $(".legende_loader").animate({marginTop : -65} ,600);
        $(".legende_loader").removeClass('close');
}
// rentre légende avec animation
function rentreLegende() {
        $(".legende_loader").animate({marginTop : -20} ,400);
        $(".legende_loader").addClass('close');
}