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).
<< 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;
var velocidad = 100;
var incremento = 20;
var ultima = null;
var primera = null;
var anchoImagen = 150;
var anchoContenedor = 400;
var id = 0;
var bloqueo = false;
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.
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]';
function valorCSS(obj, tipo) {
var aux = eval("parseFloat(obj.style."+tipo+".substring(0,obj.style."+tipo+".length-2))");
return aux;
}
function escribeFotos() {
var cont = document.getElementById("scrolling");
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 = '';
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;
}
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();
}
function movimiento() {
if (!bloqueo) {
bloqueo = true;
var cont = document.getElementById("scrolling");
var _id = id;
if (incremento > 0) {
for (var i=0; i<imagenes.length; i++) {
var foto = document.getElementById("foto"+((i+id) % imagenes.length));
if ((valorCSS(foto, "left")-incremento) < -(anchoImagen+4)) {
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--) {
var foto = document.getElementById("foto"+((i+id) % imagenes.length));
if (valorCSS(foto, "left") > (anchoContenedor+20)) {
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;
for (var i=0; i<imagenes.length; i++) {
var foto = document.getElementById("foto"+((i+id) % imagenes.length));
try {
foto.style.left = (valorCSS(foto, "left")-incremento)+"px";
} catch (e) {}
}
setTimeout("movimiento()", velocidad);
bloqueo = false;
}
}
function controlarMovimiento(e) {
var x = parseInt(e.offsetX? e.offsetX : e.layerX);
var porc = x-(anchoContenedor/2);
incremento = parseInt(-porc * 20 / (anchoContenedor/2));
}
function verImagen(e) {
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;
}
}
}
ATOM
