Presentación de imágenes mediante scrolling

Las posibles formas de presentar un grupo de imágenes son numerosas, algunas sencillas, otras más complejas. Podría estar todos los días (o al menos unos cuantos) realizando distintas presentaciones, aunque no quiero ser pesado ya que hice una en una de las primeras entradas.

En este caso, se van a mostrar las imágenes dentro de un contenedor que solo mostrará un espacio, no la totalidad, y se irán desplazando hacia la izquierda o derecha, según la posición del ratón dentro del contenedor. Cuando una imagen desaparece del contenedor irá a la parte final de la lista de imágenes.

Actualización Me he dado cuenta de que al subirlo el scroll se vuelve loco, esto sería fácil de solucionar si el scrolling lo meto en un iframe con overflow: hidden y las acciones realizarlas en el documento parent. No veo otra solución porque al tener las imágenes position: absolute, da igual si se le hace clipping al contenedor, porque a la hora del scroll cuenta como si las imágenes estuvieran visibles. Perdonad que no lo cambie, pero con esto de ir de barato (o sea Blogger), me quita mucho tiempo estar haciendo cambios y subiendo archivos a los servidores (baratos, también).

Mostrar resto >>

<< Ocultar resto
La estructura del HTML consta de tres espacios, una capa contenedora, una capa que se encarga del scrolling y una capa para cada imagen.

div.contenedor { position: relative; left: 50%; width: 402px; height: 156px; margin-left: -200px; border: 1px solid #315C7C; padding: 0px; color: #315C7C; font-family: Arial; font-weight: bold; cursor: hand; cursor: pointer; } div.scrolling { position: absolute; width: 400px; height: 150px; clip: rect(0px 400px auto 0px); } div.foto { position: absolute; width: 150px; height: 150px; top: 0px; margin: 2px; border: 1px solid #000000; } div.dif { z-index: 100; position: absolute; top: 0px; width: 1px; height: 100%; } div.pantalla { background: url(sp.gif); width: 100%; height: 100%; z-index: 1000; position: absolute; top: 0px; left: 0px; }

Las variables globales son las siguientes:

var _IE_ = navigator.userAgent.indexOf("MSIE") != -1 && navigator.userAgent.indexOf("Opera") == -1; // Si es IE var velocidad = 100; var incremento = 20; var ultima = null; // posicion de la ultima imagen var primera = null; // posicion de la primera imagen var anchoImagen = 150; var anchoContenedor = 400; var id = 0; // El indice del primero que muevo var bloqueo = false; // Para bloquear el método

Los métodos necesarios para este efecto son cinco:

• Obtener valores de los estilos de un objeto, es un método de apoyo.
• Dibujar las capas necesarias para contener las imágenes.
• Controlar el movimiento de las imágenes, para ello primero desplaza las imagenes que ya no se ven en el contenedor al final de la cola y luego las desplaza hacia la izquierda o derecha, según sea.
• Controlar el sentido y la velocidad del desplazamiento según sea la posición del ratón en la capa contenedora.
• Mostrar la imagen seleccionada según el evento onclick en el contendor.

// El vector de imagenes contiene: // La imagen en miniatura // La imagen real // La explicacion de la imagen, en este caso el copyright var imagenes = new Array(); imagenes[0] = new Array(new Image(), new Image(), '[descripción]'); imagenes[0][0].src = '[url imagen miniatura]'; imagenes[0][1].src = '[url imagen original]'; // Devuelve el valor numerico de una propiedad de los estilos (elimina el px) function valorCSS(obj, tipo) { var aux = eval("parseFloat(obj.style."+tipo+".substring(0,obj.style."+tipo+".length-2))"); return aux; } // Crea las capas necesarias que contienen las imagenes function escribeFotos() { var cont = document.getElementById("scrolling"); // Incluyo las imagenes var html = ""; for (var i=0; i<imagenes.length; i++) { html += '<div id="foto'+i+'" class="foto"><img src="'+imagenes[i][0].src+'" id="img'+i+'" /></div>'; } cont.innerHTML = html; var cont = document.getElementById("contenedor"); html = ''; // Incluyo el degradado if (!_IE_) { html += '<div class="dif" style="left: 0px;"><img src="difizq.png" /></div>'; html += '<div class="dif" style="left: '+(anchoContenedor-20)+'px;"><img src="difder.png" /></div>'; cont.innerHTML += html; } // Posicionamiento de las capas de las imagenes for (var i=0; i<imagenes.length; i++) { var div = document.getElementById("foto"+i); div.style.left = ((anchoImagen+4)*i)+"px"; if (i==0) primera = div; ultima = div; } movimiento(); } // Se encarga del movimiento de las imágenes function movimiento() { if (!bloqueo) { bloqueo = true; var cont = document.getElementById("scrolling"); var _id = id; // Primero se desplazan las imagenes que están fuera del contenedor // al principio de la cola. Se hace si el movimiento es hacia la izquierda // y despues si el movimiento es hacia la derecha // Si se mueve hacia la izquierda if (incremento > 0) { for (var i=0; i<imagenes.length; i++) { // Se cogen las imagenes segun el orden por el que se mueven var foto = document.getElementById("foto"+((i+id) % imagenes.length)); if ((valorCSS(foto, "left")-incremento) < -(anchoImagen+4)) { // Si la imagen está fuera por la izquierda y el // movimiento es hacia la izquierda, la muevo al final foto.style.left = (valorCSS(ultima, "left")+(anchoImagen+4))+"px"; ultima = foto; primera = document.getElementById("foto"+((i+id+1) % imagenes.length)); _id = (i+id+1) % imagenes.length; } } } if (incremento < 0) { for (var i=imagenes.length-1; i>=0; i--) { // Empiezo a mover el que se encuentra primero var foto = document.getElementById("foto"+((i+id) % imagenes.length)); if (valorCSS(foto, "left") > (anchoContenedor+20)) { // Si la imagen esta fuera por la derecha y el // movimiento es hacia la derecha, la muevo al principio foto.style.left = (valorCSS(primera, "left")-((anchoImagen+4)))+"px"; primera = foto; ultima = document.getElementById("foto"+(((i+id) % imagenes.length)==0? imagenes.length-1: ((i+id) % imagenes.length)-1)); _id = (((i+id) % imagenes.length)==0? imagenes.length-1: ((i+id) % imagenes.length)-1); } } } id = _id; // Movimiento de las imagenes for (var i=0; i<imagenes.length; i++) { // Empiezo a mover el que se encuentra primero var foto = document.getElementById("foto"+((i+id) % imagenes.length)); // Muevo las capas try { foto.style.left = (valorCSS(foto, "left")-incremento)+"px"; } catch (e) {} } setTimeout("movimiento()", velocidad); bloqueo = false; } } // Controla la velocidad del movimiento segun // la posicion del ratón en la capa function controlarMovimiento(e) { var x = parseInt(e.offsetX? e.offsetX : e.layerX); var porc = x-(anchoContenedor/2); incremento = parseInt(-porc * 20 / (anchoContenedor/2)); } // Muestra la imagen en pantalla function verImagen(e) { // Como hay una capa por encima, no se puede hacer click en las imagenes // Por eso se calcula que imagen está en la zona donde se hace click var x = parseInt(e.offsetX? e.offsetX : e.layerX); for (var i=0; i<imagenes.length; i++) { var foto = document.getElementById("foto"+i); if (x > valorCSS(foto, "left") && x < valorCSS(foto, "left")+anchoImagen) { var obj = document.getElementById("imagen"); var html = '<br>'+imagenes[i][2]+'<br><br><img src="'+imagenes[i][1].src+'">'; obj.innerHTML = html; } } }