elTecnoBlog » Javascript http://www.eltecnoblog.com Tecnología, comunicaciones, entrepreneurship y un poco de todo lo demás Thu, 02 Feb 2012 11:01:18 +0000 es hourly 1 http://wordpress.org/?v=3.0.2 Slider para mootools 1.2 http://www.eltecnoblog.com/2010/12/03/slider-para-mootools-1-2/ http://www.eltecnoblog.com/2010/12/03/slider-para-mootools-1-2/#comments Fri, 03 Dec 2010 09:51:03 +0000 guillem http://www.eltecnoblog.com/?p=71 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!

Share

]]> http://www.eltecnoblog.com/2010/12/03/slider-para-mootools-1-2/feed/ 2 Comprimir código Javascript http://www.eltecnoblog.com/2007/05/12/comprimir-codigo-javascript/ http://www.eltecnoblog.com/2007/05/12/comprimir-codigo-javascript/#comments Sat, 12 May 2007 11:38:26 +0000 guillem http://www.eltecnoblog.com/2007/05/12/comprimir-codigo-javascript/ Aquí os dejo un interesante enlace con una web que permite comprimir código Javascript.

No tengo seguridad 100% de que funcione, pero por lo menos es gracioso. Además cambia nombres de variables así que hace una especie de ‘ofuscación’ del código.

http://javascriptcompressor.com/

Share

]]> http://www.eltecnoblog.com/2007/05/12/comprimir-codigo-javascript/feed/ 0