dic 03 2010

Slider para mootools 1.2

Category: Código,Javascript,Tutorialguillem @ 11:51

Basándome en el magnífico tutorial y código de Antonio Lupetti en su post ‘Ultra versatile slider for websites‘, he hecho algunas modificaciones para permitir que funcione sin problemas con mootools 1.2, puesto que algunas cosas canviaron en esta versión (especialmente en la clase FX).

Para situaros, básicamente el script permite crear de una forma sencilla un slide para cuando tenemos una lista de elementos muy larga de la que sólo podemos mostrar unos cuantos de una sola vez.

Veamos como hacerlo funcionar:

Código HTML

Simplemente hay que crear un div que va a contener nuestra lista de elementos (que lógicamente haremos como una lista). A ese div será al que le daremos la facilidad de hacer el slide en base al ID:

<div id="slider-stage">
<ul id="myList">
    <li>Box 1</li>
    <li>Box 2</li>
    <li>Box 3</li>
    <li>Box 4</li>
    <li>Box 5</li>
    <li>Box 6</li>
</ul>
</div>

Luego, en algún lugar dónde nos resulte cómodo dispondremos los botones para avanzar y retroceder, con especial ojo al ID de los enlaces, pues luego el script lo utilizará como referencia:

<a id="previous" href="#">Previous</a> | <a id="next" href="#">Next</a>

Código CSS

Aquí, hay que poner especial atención a no descuidar el overflow: hidden y a definir el slider-list con el ancho suficiente para que entren nuestros bloques. En definitiva tendrá que ser:

Ancho = ( (ancho slider-list li) + (padding slider-list li) + (margen slider-list li) ) * Num. elementos en la lista

#slider-stage {
width: 632px;
overflow: hidden;
height: 200px;
margin: 0 auto;
}
#slider-list {
width: 2000px;
border: 0;
margin: 0;
padding: 0;
left: 400px;
}
#slider-list li {
list-style: none;
margin: 0;
padding: 0;
border: 0;
margin-right: 4px;
padding: 4px;
background: #ddd;
float: left;
width: 200px;
height: 200px;
}

Código Javascript

Lógicamente, primero hay que incluir en el head del html el javascript de mootools. Luego podéis poner este código también dentro de un js o copiarlo dentro del html.

<script type="text/javascript">// < ![CDATA[
// < ![CDATA[
// < ![CDATA[
// < ![CDATA[
  window.addEvent( 'domready', function() {
    // Declaring increment vars
    var totInc = 0;
    // Increment = Box size (width+padding left/right+margin left/right)
    var inc = 212;
    // Max Right Increment = Increment * (- Non Visible elements) (this is negative)
    var maxRightInc = inc*(-3);
    // FX var
    var fx = new Fx.Morph( 'slist', { duration: 500, transition: Fx.Transitions.Back.easeInOut, link: 'cancel' });
    // Previous Button
    $('sprevious').addEvents( {
      'click' : function( event )
      {
        if ( totInc < 0 )         {           totInc = totInc + inc;           fx.start( { 'margin-left': totInc } );         }       }     });          // Next Button     $('snext').addEvents( {       'click' : function( event )       {         if ( totInc > maxRightInc )
        {
          totInc = totInc - inc;
          fx.start({ 'margin-left': totInc });
        }
      }
    });
  });
// ]]></script>

Aquí los comentarios los he dejado en inglés. En parte porque los originales ya estaban en inglés y también porque a menudo, el código lo comento en inglés, no se deciros bien porque…

Lo importante aquí:

inc = Tamaño de las cajas que mostramos (ancho+padding izq/der+margen izq/der)
maxRightInc = inc * (-número de elementos no visible (en valor negativo))

Así pues, si tenemos 6 elementos y mostramos de entrada 3, el maxRightInc quedaría como inc*(-3)

Y eso es todo! Espero que os sea útil!

Etiquetas: , ,

2 Responses to “Slider para mootools 1.2”

  1. dhamaso says:

    gracias por la explicacion, pero oye no podrias poner un ejemplo en funcionamiento

  2. guillem says:

    Creo que en la web que menciono al principio de la que saqué el slider original tiene un ejemplo. En cualquier caso puedes ver un ejemplo funcionando en http://www.scannerfm.com/player2011/ en el apartado de podcast.

    Saludos!

Leave a Reply