JMiur [E]

Las transisiones con CSS no están limitadas a efectos hover que permutan propiedades de un solo elemento; pueden ser aplicadas de otras formas para reaccionar a clicks, pero, en ese caso, como siempre, debemos recurrir al JavaScript para que los navegadores interpreten lo que queremos hacer.

En un primer ejemplo, armamos una especie de lista con imágenes del mismo tamaño que funcionará de manera similar a un slider:
<div id="demoANIM1">
  <div id="demoANIM1imagenes">
    <img src="URL_IMAGEN1" />
    <img src="URL_IMAGEN2" />
    <img src="URL_IMAGEN3" />
    <-- agregamos todas las que se nos ocurran (en el ejemplo hay siete) -->
    <img src="URL_IMAGEN7" />
  </div>
</div>
Puesto así, las veremos una al lado de la otra o una debajo de la otra dependiendo de sus tamaños o del editor que empleemos.

No importa, ahora le agregaremos algunos enlaces para "navegar" ya sea arriba o abajo de lo anterior:
<div id="demoANIM1links">
  <a onclick="srcdemoANIM1(0);" href="javascript:void(0);">1</a>
  <a onclick="srcdemoANIM1(1);" href="javascript:void(0);">2</a>
  <a onclick="srcdemoANIM1(2);" href="javascript:void(0);">3</a>
  <-- agregamos un enlace para cada una de las imágenes -->
  <a onclick="srcdemoANIM1(6);" href="javascript:void(0);">7</a>
</div>
Veremos los numeritos que son enlaces y que por ahora no harán nada. Nos falta el CSS que puede ir antes que todo eso o en el HEAD de nuestro sitio:
<style>
  #demoANIM1 { /* es el DIV contenedor */
    /* lo dimensiono del mismo tamaño que la imagen (en este ejemplo de 500x375) */
    height: 375px;
    width: 500px;
    margin: 0 auto; /* lo centro */
    overflow: hidden; /* impido que se deborde */
    position: relative; /* establezco esta propiedad para poder ubicar las imágenes de manera absoluta */
  }
  #demoANIM1imagenes { /* es el contendor interno donde están las imágenes */
    /* lo fijo arriba */
    position:absolute;
    left: 0;
    top: 0;
    /* le digo que su ancho es igual a la suma del ancho de todas imágenes */
    width: 3500px; /* 500 * 7 = 3500 */
    /* y le digo que cualquier cambio sea animado */
    -moz-transition:all 1s ease-in-out;
    -webkit-transition:all 1s.ease-in-out;
    -o-transition:all 1s.ease-in-out;
    transition:all 1s ease-in-out;
  }
  #demoANIM1imagenes img { /* fuerzo a que las imágenes se vean todas iguales */
    height: 375px;
    width: 500px;
  }
  /* y le pongo un poc de estilo a los numeritos que sirven de enlace */
  #demoANIM1links {
    border-bottom: 1px solid #345;
    margin: 0 auto;
    padding: 10px 0;
    text-align: center;
    width: 500px;
  }
  #demoANIM1links a {
    background-color: #345;
    border-radius: 4px 4px 4px 4px;
    box-shadow: 0 0 4px #ABC inset;
    margin: 0 2px;
    padding: 4px 8px;
  }
  #demoANIM1links a:hover {
    box-shadow: 0 0 8px #ABC inset;
    color: #FFF;
  }
</style>
Lo que veré ahora será una sola imagen (la primera) y si le quitara la propiedad overflow, vería una tira larga con las siete imágenes, una al lado de la otra ya que todas se encuentran dentro de un contenedor que es el que desplazaremos, modificando la propiedad left.

Para eso necesito un script que es lo que se ve en el atributo onclick de los enlaces.
<script>
//<![CDATA[
  function srcdemoANIM1(num) {
    var mover = num * 500;
    document.getElementById("demoANIM1imagenes").style.left = -mover + "px";
  }
//]]>
</script>
Es una función simple, llega con un numero de orden (de 0 a 6 en este caso), lo multiplica por el ancho de la imagen y reposiciona el DIV contenedor de las imágenes una cierta cantidad de pixeles, moviéndolo (número negativo) hacia la izquierda. Como hemos establecido las propiedades de transición, eso se verá con un efecto deslizante en Firefox 4, Safari, Chrome y Opera.

10 comentarios:

Unknown  

Encantador :D

Responder
Unknown  

Dices: "Nos falta el CSS que puede ir antes que todo eso o en el HEAD de nuestro sitio"

Mi pregunta es, con antes de todo eso. Te refieres en el mismo post, en la misma entrada. Estas diciendo que eso se puede colocar en una entrada?
Sin colocar el scrip fuera de ella?

Porque publico en un blog.. me gustaría saber, si se puede hacer eso.

¿Yo podría implementar esto dentro de una entrada?

Bueno, por ahora no fui capaz de conseguirlo... pues.

Responder
JMiur  

Esto es un blog y el ejemplo está en la entrada misma.

Cualquier CSS se puede colocar dentro de una entrada entre etiquetas STYLE.

Lo mismo ocurre con los scripts aunque depende de si el código utiliza caracteres no admitidos en cuyo caso, se debe cargar desde un archivo externo.

Responder
Pablo Álvarez Corredera  

@JMiur

Ajammm sabes que hise?
Me saque todo para un .txt y tome una captura de toda la página xP

Ando experimentándolo proximamente pues,
aunque a mi me aparecen las imágenes a lo largo, no me funcionaba el script o eso es lo que parecía, quizás sea como dices por algo de carácteres; seguiré investigándolo.
Realmente es un poco latoso, pero me parece muy bueno para poder insertar varias capturas.
Una vez este el código acoplado, sería redimensionar, cambiar las Url, copiar y pegar no más. Haber si lo consigo.
S2 xP

Responder
111tango escuela estudio  

no lo puedo lograr
1 los numeros para navegar me salen verticales
2 no me funciona el scrpts ( se coloca tambien debajo del head?)
gracias y el blog es exelente

Responder
JMiur  

Tendría que ver tu ejemplo para decirte dónde está el error.

Responder
Florita  

hola, y donde esta el precargador (preload), son imagenes y seria bueno que tuviera un precargador o no es necesario?. alguna ayuda por favor.

Responder
JMiur  

No hay ninguno. Si quieres agregarlo, lo agregas.

Responder
RafaMon  

Hola, estoy diseñando una web de productos y buscaba algo como esto pero en vez de numeritos de enlace busco la opción de colocar las imágenes en miniatura. He visto varios pero cuando vos explicáis algo yo me entero.saludos

JMiur  

Hay varios como ese que describes; para adaptar este, habría que pensar y rehacer el script.

Responder

¿Quiere dejar un comentario?

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

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