JMiur [E]

Ya que pudimos crear una galería de imágenes o por lo menos tratar de entender cómo funcionan; ahora me preguntan por los sliders y es que, al parecer, la nueva moda no nos permite conformamos con cambiar las imagenes con un click sino que también queremos que se "deslicen".

Obviamente, hacer algo así y que funcione perfectamente excede las posibilidades de todos nosotros pero, podemos intentarlo aunque sea de manera muy elemental.

Lo primero que debiéramos saber es que acá no hay magia; no hay instrucciones ni códigos que generen esos efectos sino que están creados de manera manual. No es cosa de escribir algo como mover de acá para allá; cada uno de esos movimientos es una intrucción precisa y es la velocidad con que se ejecuta cientos de veces lo que produce el efecto. Cuando usamos una librería de algún tipo, es esa librería la que nos facilita estas tareas pero siempre, en alguna parte, alguien tuvo que escribirlo.

Para hacer algo así necesitamos conocer unas funciones nuevas, aquellas que ejecutan "cosas" cada cierto tiempo. La más elemental se llama setTimeout() y lo que hace es ejecutar algo pasado un cierto tiempo. Es fácil de usar; por ejemplo:
<script type="text/javascript">
  function verventana() {
    alert("Pasaron cinco segundos y ahora debe cerrar la ventana manualmente");
  }
</script>

<a href="#" onclick="setTimeout(verventana, 5000);">click y esperar</a>
Al hacer click se ejecuta setTimeout() con dos parámetros, el primero indica el nombre de una función (la nuestra, la que queremos usar) y el segundo indica el tiempo que deberá pasar entre que hicimos click y el momento en que se ejecute esa función; en este caso, dice 5000 que es un valor expresado en milisegundos (1 segundo = 1000 milisegundos). Pasados cinco segundos se ejecutará verventana() que simplemente, mostrará una ventanita de alerta.


Esto ocurrirá cada vez que se haga click en ese enlace; en resumen, en lugar de ocurrir algo inmediatamente, habrá una demora.

No es algo que nos ayude en nada para lo que queremos hacer pero, hay otra función que es muy similar que se llama setInterval() y tiene la misma sintaxis pero una diferencia fundamental, en lugar de ejecutarse una sola vez, se ejecuta cada cierto tiempo de manera contínua; si se nos ocurriera poner lo mismo que antes pero usando esta función en lugar de la otra, lo que ocurrriría es que la ventana aparecería cada cinco segundos; algo que podría ser muy exótico pero bastante molesto.

A esta función se le suma otra que es la que nos permitiría detenerla y se llama clearTimeout(). Son estas dos funciones las que utilizaremos para animar un poco las cosas.

Vamos a un ejemplo para entender la idea. Pondremos una imagen y con un enlace, haremos que aparezca y desaparezca, modificando su tamaño. Tendré este HTML:
<img id="demoA1" src="URL_imagen" width="128" />

<a href="javascript:ejemploancho('demoA1');">click</a>
Y ahora, el código JavaScript que en realidad, puede ser hecho de mil maneras distintas y con distintos criterios:
<script type="text/javascript">
//<![CDATA[
  // voy a inicializar algunas variables
  var timerancho; // el nombre que le daré al timer
  var flagancho = 0; // un valor que me indicará si estoy aumentando (1)  o disminuyendo (-1) el tamaño
  var demoimagenancho; // el objeto imagen que voy a animar
  var contadorancho = 0; // es lo que usaré para saber cuando detenerme

  // esta función es la que se ejecuta al hacer click y se llega con el ID de la etiqueta IMG
  function ejemploancho(cual) {
    // si el flag no es cero quiere decir que se está animando así que salimos de la función para no ejecutarla varias veces
    if(flagancho!=0) {
      return;
    }
    // guardo la imagen
    demoimagenancho = document.getElementById(cual);
    contadorancho = 0; // pongo el contador a cero
    // si la imagen mide 128 pixeles al hacer click haré que se achique hasta desaparecer
    if(demoimagenancho.width==128) {
      flagancho = -1; // achicar la imagen dismimuyendo su ancho
    } else {
      // caso contrario, al hacer click haré que se agrande hasta su tamaño original
      flagancho= 1; // agrandar la imagen aumentando su ancho
    }
    // listo, ahora indico que la función cambiarancho() se ejecute cada milisegundo
    timerancho = setInterval(cambiarancho,1);
  }

  // y esta es la función que se ejecutará una vez cada milisegundo
  function cambiarancho() {
    contadorancho++; // incrementamos el contador
    // si el contador llegó hasta 128 (que es el ancho de la imagen) detenemos todo
    if(contadorancho>128) {
      // cancelamos la función y ya no se seguirá ejecutando
      clearTimeout(timerancho);
      // terminamos la animación
      flagancho = 0;
    }
    // incrementamos o decrementamos el ancho de la imagen
    demoimagenancho.width = demoimagenancho.width + flagancho;
  }
//]]>
</script>
¿Engorroso?


clickclickclick

Lo mismo puede hacerse con cualquier otra propiedad o combinar varias al mismo tiempo:


Así que la base para hacer un slider sería cambiar la posición de las imágenes y para eso, podemos usar las propiedades left, top, right o bottom pero, habrá que pensar la forma de manejarlas.



11 comentarios:

Manfenix  

Es un gusto estar en primera fila de la platea para ver cómo se nos "revela" el gran misterio.... :D

Responder
Santi Folch  

Muy bueno Miur. Una vez más veo que la sintaxis de JavaScript es realmente parecida a PHP (aunque del lado del cliente navegador). Por cierto, no vendría mal alguna entrada sobre la sintaxis básica de JavaScript, y si incluye algún ejercicio mejor. ¡Ponnos deberes! :D

Responder
Graciela  

Engorroso? yes! me encanta, jugué un rato con los bichitos!

Con probar no se pierda nada, buen día o buenas tardes :D

Responder
Adrián J. Messina  

Que bárbaro, los resultados pueden ser increíbles, sin embargo el detalle y lo minucioso harán que valga la pena.
Tiene muy buena pinta.
Increíble trabajo.
Vamos a seguir leyendo...

Responder
JMiur  

Todo es cosa de practicar y probar; con muy poco puede hacerse mucho, aunque sea elemental :-)

Responder
Nitra Games 360  

Oye Jmiur como puedo disminuir la distancia del texto al gadget de linkwithin, aca te dejo un ejemplo del espacio lo quiero disminuir para que se sea mucho espacio, es los enlaces al gadget de linkwithin.

Ejemplo imagen:

http://img823.imageshack.us/img823/9847/sasasb.png

Espero que me ayudes no se como le he movido a todo y no se disminuye,

Responder
JMiur  

Tendría que ver el blog porque con una imagen no sabría decirte.

Responder
Nitra Games 360  

ok jmiur ahora puedes ver mi blog el cual es:

http://nitragames360.blogspot.com/

puedes ver el codigo de fuente !!

Responder
JMiur  

Pero ¿a qué espacio te refieres? Porque, por lo que veo, ahí no hay propeidades definidas en tu blog sino que todas son las que tiene el mismo gadget.

Responder
Michael Saenz  

Muy buen post :) pero amigo tengo una duda, yo necesito ir de una imagen a otra no como slide sino digamos con numeros ubicados abajo al hacer click en 1 ir a la imagen 1 las hacer click en 3 a la imagen 3 y asi pero q paresca un slide como lo puedo hacer?

JMiur  

Tienes que buscar un script que haga eso. esta entrada sólo pretende explciar el funcionamiento de los eventos y timeouts.

Responder

¿Quiere dejar un comentario?

recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...

Todos los archivos y demos alojados en Fileden han sido redireccionados y deberían estar funcionando correctamente.
De todos modos, también puede accederse a ellos a través de SkyDrive

Nota: sólo los miembros de este blog pueden publicar comentarios.

Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.

Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...

 
CERRAR