Mootools: Slider orizzontale multiplo?

[Rekdal]

Ciao ragazzi, sto implementando questo esempio

http://woork.blogspot.com/2009/01/ul...-websites.html

in un sito. Il casino è che l'esempio è limitato a uno slideshow e basta. Ma sei io volessi invece avere per esempio 3-4 slideshow diversi in pagina, ognuno indipendente? Come dovrei modificare il javascript?

Spero di essermi spiegato :P
aspetto una vostra consulenza

Grazieee

[marco.carrieri]

<script type="text/javascript">
window.addEvent('domready', function(){ 
      var totIncrement        = 0;
      var increment            = 212;
      var maxRightIncrement    = increment*(-6);
      var fx = new Fx.Style('slider-list', 'margin-left', {
                duration: 1000,
                transition: Fx.Transitions.Back.easeInOut,
                wait: true
       });
       
       //-------------------------------------
      // EVENTS for the button "previous"
      $('previous').addEvents({ 
          'click' : function(event){ 
          if(totIncrement<0){
                    totIncrement = totIncrement+increment;
                    fx.stop()
                    fx.start(totIncrement);
                }
            }                    
      }); 
     
       //-------------------------------------
      // EVENTS for the button "next"
        $('next').addEvents({ 
          'click' : function(event){ 
             if(totIncrement>maxRightIncrement){
                 totIncrement = totIncrement-increment;
                fx.stop()
                fx.start(totIncrement);
            }
          }                    
      })

     
});
    </script> 

<script type="text/javascript">
window.addEvent('domready', function(){ 
      var totIncrement        = 0;
      var increment            = 212;
      var maxRightIncrement    = increment*(-6);
      var fx = new Fx.Style('slider-list2', 'margin-left', {
                duration: 1000,
                transition: Fx.Transitions.Back.easeInOut,
                wait: true
       });
       
       //-------------------------------------
      // EVENTS for the button "previous"
      $('previous2').addEvents({ 
          'click' : function(event){ 
          if(totIncrement<0){
                    totIncrement = totIncrement+increment;
                    fx.stop()
                    fx.start(totIncrement);
                }
            }                    
      }); 
     
       //-------------------------------------
      // EVENTS for the button "next"
        $('next2').addEvents({ 
          'click' : function(event){ 
             if(totIncrement>maxRightIncrement){
                 totIncrement = totIncrement-increment;
                fx.stop()
                fx.start(totIncrement);
            }
          }                    
      })

     
});
    </script> 

e mettendo appunto 4 pulsanti... due per il primo e due per il secondo? solo con gli id differenti?

Funziona?

[Rekdal]

Ciao Marco, ti dispiacerebbe spiegarti meglio? Non capisco dove vuoi arrivare

[marco.carrieri]

se fai tanti blocchi di script tanti quanti sono gli elementi a cui vuoi applicare l'effetto non va?

Se vedi che va puoi fare una funzione a cui passi tre parametri e cioè i 3 id che devi usare... quello del div contenitore,quello del prev,quello del next...

i quali richiamano a sua volta il blocco di funzion con i 3 addevent

[Rekdal]

Infatti, smanettandoci un po' ho risolto proprio così:

    <script type="text/javascript">
    window.addEvent('domready', function(){ 
          var totIncrement        = 0;
          var increment            = 212;
          var maxRightIncrement    = increment*(-6);
          var fx = new Fx.Style('myList', 'margin-left', {
                    duration: 1000,
                    transition: Fx.Transitions.Back.easeInOut,
                    wait: true
           });

           //-------------------------------------
          // EVENTS for the button "previous"
          $('previous').addEvents({ 
              'click' : function(event){ 
              if(totIncrement<0){
                        totIncrement = totIncrement+increment;
                        fx.stop()
                        fx.start(totIncrement);
                    }
                }                    
          }); 

           //-------------------------------------
          // EVENTS for the button "next"
            $('next').addEvents({ 
              'click' : function(event){ 
                 if(totIncrement>maxRightIncrement){
                     totIncrement = totIncrement-increment;
                    fx.stop()
                    fx.start(totIncrement);
                }
              }                    
          })


    });
    window.addEvent('domready', function(){ 
          var totIncrement        = 0;
          var increment            = 212;
          var maxRightIncrement    = increment*(-6);
          var fx = new Fx.Style('myList2', 'margin-left', {
                    duration: 1000,
                    transition: Fx.Transitions.Back.easeInOut,
                    wait: true
           });

           //-------------------------------------
          // EVENTS for the button "previous"
          $('previous2').addEvents({ 
              'click' : function(event){ 
              if(totIncrement<0){
                        totIncrement = totIncrement+increment;
                        fx.stop()
                        fx.start(totIncrement);
                    }
                }                    
          }); 

           //-------------------------------------
          // EVENTS for the button "next"
            $('next2').addEvents({ 
              'click' : function(event){ 
                 if(totIncrement>maxRightIncrement){
                     totIncrement = totIncrement-increment;
                    fx.stop()
                    fx.start(totIncrement);
                }
              }                    
          })


    });
        </script> 

Grazie!
Ciao

[marco.carrieri]

magari per non utiliìzzare tante volte quei blocchi di codice tante quante sono gli utilizzi che devi fare potresti raccogliere tutto in una sotto funzione del tipo magari

function aggiungievento(contenitore,indietro,avanti)
{
 window.addEvent('domready', function(){ 
          var totIncrement        = 0; 
          var increment            = 212; 
          var maxRightIncrement    = increment*(-6); 
          var fx = new Fx.Style(contenitore, 'margin-left', { 
                    duration: 1000, 
                    transition: Fx.Transitions.Back.easeInOut, 
                    wait: true 
           }); 

           //------------------------------------- 
          // EVENTS for the button "previous" 
          $(indietro).addEvents({ 
              'click' : function(event){ 
              if(totIncrement<0){ 
                        totIncrement = totIncrement+increment; 
                        fx.stop() 
                        fx.start(totIncrement); 
                    } 
                }                     
          }); 

           //------------------------------------- 
          // EVENTS for the button "next" 
            $(avanti).addEvents({ 
              'click' : function(event){ 
                 if(totIncrement>maxRightIncrement){ 
                     totIncrement = totIncrement-increment; 
                    fx.stop() 
                    fx.start(totIncrement); 
                } 
              }                     
          }) 


    }); 
} 

e richiamarla cosi

aggiungievento("myList1","previous1","next1");
aggiungievento("myList2","previous2","next1");

Non l'ho testata ma "potrebbe" funzionare