[jQuery] Varibiabili e plugin

[lxn]

Ciao a tutti,
ho recentemente creato un plugin che al suo interno all'inizializzazione setta in una variabile l'id dell'elemento che devo far muovere.

Il problema sopraggiunge quando imposto due elementi per lo stesso plugin:

$("#slider_mask").ackslider({
         pixel_step: 940,
         easingFx: "easeInOutCubic"
});
$("#slide_photo").ackslider({
         pixel_step: 160,
         activeRPLC: 1,
         easingFx: "easeInOutCubic"
});

In pratica la variabile di cui parlavo all'inizio viene sovrascritta dal secondo elemento, prendendo l'Id dell'ultimo elemento stanziato (slide_photo) con conseguente funzionamento soltanto di questo.

Come posso fare?
Posso rendere quella variabilie univoca per plugin?

Grazie
ciao Ale

[Vindav]

ho recentemente creato un plugin che al suo interno all'inizializzazione setta in una variabile l'id dell'elemento che devo far muovere.

posta il codice dove setti la variabile...

[lxn]

Posto solo i punti "salienti" perchè il codice è di 500 righe

(function($){  
     $.fn.ackslider = function(options) {  
     
         var defaults = {
            speed             : 500,                     //velocità di slide
            pixel_step        : 100,                     //numero di pixel di slide
            rightHref         : "#btn_right",            //id bottone di slide a destra
            leftHref          : "#btn_left",             //id bottone di slide a sinistra
            topHref           : "#btn_top",              //id bottone di slide su
            downHref          : "#btn_down",             //id bottone di slide giu
            max_width         : 0,
            max_height        : 0,
            activeRPLC        : 0,                       //attivazione replace dei pulsanti di slide
            rightRPLC         : "#btn_right_vuoto",      //id bottone di slide a destra vuoto
            leftRPLC          : "#btn_left_vuoto",       //id bottone di slide a sinistra vuoto
            topRPLC           : "#btn_top_vuoto",        //id bottone di slide su vuoto
            downRPLC          : "#btn_down_vuoto",       //id bottone di slide giu destra vuoto
            multichild        : false,
            easingFx          : "linear",                //effetto di movimento (http://gsgd.co.uk/sandbox/jquery/easing/)
            navigation        : false,                   //attivazione navigazione a elementi
            navigationId      : "#navigation",           //id navigazione a elementi
            navigationHover   : false,                   //attivazione hover navigazione a elementi
            autoSlider        : false,                   //attivazione slide automatico
            autoSliderTime    : 2000,                    //intervallo tra uno slide e l'altro (solo su slide automatico)
            autoSliderAltRPLC : false,                   //se attivato (true) mette nello autoSliderAltId il contenuto dell'alt
            autoSliderAltId   : "#slider_alt_container"
         };
         
         var authorization = true;
         
         var options = $.extend(defaults, options);

         return this.each(function() {
            
            //definizione degli id maschera e maschera_in
            id_mask = "#" + this.id;
            id_mask_in = "#" + this.id + "_in";

            ....

          };  
})(jQuery);

Le variabili in questione sono id_mask e id_mask_in.
Vengono utilizzate poi in tutto il ciclo each e quindi in tutto il plugin.

[Vindav]

a parte che sarebbe più coretto fare "$(this).attr('id');" non vedo quale sia il problema ogni volta, giustamente, la variabile viene valorizzata con l'id corrente...

   Vengono utilizzate poi in tutto il ciclo each e quindi in tutto il plugin.

le 2 variabili devono essere utilizzate solamente all'interno della funzione definita nell'each

[lxn]

Le due variabili sono definite solo nell'each del plugin!

Oggi ho inoltre trovato che lo stesso comportamento succede anche su un plugin molto più semplice che ho scritto recentemente!

(function($){  
   $.fn.expand = function(options) {  
      
      var defaults = {  
         width           : "500px",
         height          : "500px"
      };

      var options = $.extend(defaults, options);
                  
      return this.each(function() {

         this.width = $(this).width() + "px";
         this.height = $(this).height() + "px";

         $(this).bind('focusin', function() {
            $(this).animate({
               width    :  options.width,
               height   :  options.height
            }, 500);
         });

         $(this).bind('focusout', function() {
            $(this).animate({
               width    :  "176px",
               height   :  "69px"
            }, 500);
         });

      });  
   };  
})(jQuery);

Lo setto nell'head così:

$("textarea").expand({
         width :  "380px",
         height:  "200px"
});

In pratica il plugin dovrebbe onfocusin allargare la textarea a 380x200 e onfocusout tornare alle dimensioni originarie che setto all'inizio dell'each!
Invece così come nell'altro plugin al primo elemento dell'each legge correttamente larghezza e altezza mentre per tutti gli altri elementi dell'each legge altezza e larghezza a 0!

Non capisco quale sia il problema...

[Vindav]

mmm... ci do un occhiata...

edit: prova cosi:

(function($){  
	   $.fn.expand = function(options) {  
	      
	      var defaults = {  
	         width           : "500px",
	         height          : "500px"
	      };

	      var options = $.extend(defaults, options);
	                  
	      return this.each(function() {

	         var width = $(this).width() + "px";
	         var height = $(this).height() + "px";

	         $(this).bind('focusin', function() {
	            $(this).animate({
	               width    :  options.width,
	               height   :  options.height
	            }, 500);
	         });

	         $(this).bind('focusout', function() {
	            $(this).animate({
	               width    :  width,
	               height   :  height
	            }, 500);
	         });

	      });  
	   };  
	})(jQuery);