Zoom automático para imágenes

Realizar un zoom en las imágenes es algo que puede sernos de utilidad, ya sea porque no tenemos demasiado espacio en la página y aún así queremos ponerla a gran resolución, o simplemente para poder apreciar mejor los detalles de la foto. Lo que vamos a hacer es modificar todas las imágenes que queramos (distinguiéndolas por un parámetro) para que aparezca un icono de una lupa, que al pulsarlo hará que la imagen se vea más grande y permitiendo movernos por ella según el movimiento del ratón.

Mostrar resto >>

<< Ocultar resto
Hay dos formas de realizar la ampliación de la imágen: la primera es mostrar la misma imágen duplicando su tamaño mediante estilos. La segunda forma es usando otra imagen que tenga el doble de tamaño y mejor resolución. Para ver como funciona una u otra forma hay que seleccionar el checkbox y pinchar en la lupa.
Sea el método que se usa, la forma de ampliarlo es la siguiente: cuando se cargue la página, obtenemos todas los elementos imágenes del documento, comprobamos que es una de las que queremos y la modificamos. La modificación es sencilla, se crea una capa, la añadimos antes del elemento previo a la imagen (usando nextSibling), dentro de esta capa incluimos un botón con la lupa y una capa que estará oculta y que tiene como imagen de fondo un gif transparente (así podemos actuar sobre ella y no se ve) y por último se incluye la misma imagen.
Cuando se pulsa en la lupa, o bien se duplica el tamaño de la imagen o bien se cambia por otra imagen (tambien se podría usar una imagen con mejor resolución y mostrarla inicialmente a la mitad del tamaño, pero no creo que sea correcto, porque en el caso de que el usuario no quiera hacer zoom sobre la imagen, tendrá que esperar de todas formas a que cargue la imagen con mayor solución y mayor tamaño). También se mostrará la capa transparente, la cual tiene capturado el evento onmousemove para realizar el movimiento de la imagen.
El movimiento de la imagen ampliada se hace mediante clipping y desplazamiento. El clipping recorta la zona visible de la imagen a un recuadro, pero si movemos la imagen hacia un lado, el clipping también se movería, por ello hay que mover la zona visible en sentido contrario al movimiento de la imagen. Así se obtiene el efecto deseado.
El codigo es el siguiente:

    var idProceso = null;     // 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;     }     // Acción que se ejecuta cuando se pulsa el boton de la lupa     // Si estaba pulsada se restaura la foto     // Si no estaba pulsada, se cambia el tamaño de la imagen (x2) o se cambia la imagen     function iniciaZoom(n) {         var div = document.getElementById("div"+n);                  // No está pulsado         if (div.getAttribute("zoom") == "0") {                      // Se amplia el tamaño de la imagen             var img = document.getElementById("img"+n);             var ancho = valorCSS(img, "width")*2;             var alto = valorCSS(img, "height")*2;             // Se recorta la imagen y almacenamos estos datos             // en un atributo para trabajar con ellos más facilmente             img.style.clip = "rect(0 "+(ancho/2)+" "+(alto/2)+" 0)";             img.setAttribute("clip", "0,"+(ancho/2)+","+(alto/2)+",0");             // Se cambia de imagen si se ha seleccionado mayor resolución             if (document.getElementById("resolucion").checked) {                 img.src="http://static.flickr.com/41/105217662_743a75eb84_o.jpg";             }             img.style.width = ancho+"px";             img.style.height = alto+"px";                          img.style.position = "absolute";             img.style.top = "0px";             img.style.left = "0px";                  // Se muestra la tapadera, la capa que tiene             // la accion de mover la capa             var tapadera = document.getElementById("tap"+n);             tapadera.style.display = "block";                          div.setAttribute("zoom", "1");                      // Está pulsado         } else {             // Se restaura la imagen             var img = document.getElementById("img"+n);             var ancho = valorCSS(img, "width")/2;             var alto = valorCSS(img, "height")/2;             img.src = "http://static.flickr.com/41/105217661_deaf3476b8_o.jpg";             img.style.clip = "rect(auto auto auto auto)";             img.style.width = ancho+"px";             img.style.height = alto+"px";             img.style.position = "absolute";             img.style.top = "0px";             img.style.left = "0px";                  // Se oculta la tapadera             var tapadera = document.getElementById("tap"+n);             tapadera.style.display = "none";                          div.setAttribute("zoom", "0");         }     }               // Mueve la capa hacia la derecha, izquierda, arriba o abajo     // Según la posición en la que se encuentre el raton dentro     // de la tapadera     function moverCapa(obj, x, y) {             var ok = false;              var ancho = valorCSS(obj, "width")/2;         var alto = valorCSS(obj, "height")/2;                  // Se mueve hacia la izquierda         if (x > 0 && x <ancho/4 && valorCSS(obj, "left") < 0) {             obj.style.left = (valorCSS(obj, "left")+1)+"px";             var clipant = obj.getAttribute("clip").split(",");             obj.style.clip = "rect("+clipant[0]+" "+(parseInt(clipant[1])-1)+" "+clipant[2]+" "+(parseInt(clipant[3])-1)+")";             obj.setAttribute("clip", clipant[0]+","+(parseInt(clipant[1])-1)+","+clipant[2]+","+(parseInt(clipant[3])-1));             ok = true;         // Se mueve hacia la derecha         } else if (x > ancho*3/4 && x <ancho && valorCSS(obj, "left") > -ancho+20) {             obj.style.left = (valorCSS(obj, "left")-1)+"px";             var clipant = obj.getAttribute("clip").split(",");             obj.style.clip = "rect("+clipant[0]+" "+(parseInt(clipant[1])+1)+" "+clipant[2]+" "+(parseInt(clipant[3])+1)+")";             obj.setAttribute("clip", clipant[0]+","+(parseInt(clipant[1])+1)+","+clipant[2]+","+(parseInt(clipant[3])+1));             ok = true;         }         // Se mueve hacia abajo         if (y > 0 && y <alto/4 && valorCSS(obj, "top") < 0) {             obj.style.top = (valorCSS(obj, "top")+1)+"px";             var clipant = obj.getAttribute("clip").split(",");             obj.style.clip = "rect("+(parseInt(clipant[0])-1)+" "+clipant[1]+" "+(parseInt(clipant[2])-1)+" "+clipant[3]+")";             obj.setAttribute("clip", (parseInt(clipant[0])-1)+","+clipant[1]+","+(parseInt(clipant[2])-1)+","+clipant[3]);             ok = true;         // Se mueve hacia arriba         } else if (y > alto*3/4 && y <alto && valorCSS(obj, "top") > -alto+20) {             obj.style.top = (valorCSS(obj, "top")-1)+"px";             var clipant = obj.getAttribute("clip").split(",");             obj.style.clip = "rect("+(parseInt(clipant[0])+1)+" "+clipant[1]+" "+(parseInt(clipant[2])+1)+" "+clipant[3]+")";             obj.setAttribute("clip", (parseInt(clipant[0])+1)+","+clipant[1]+","+(parseInt(clipant[2])+1)+","+clipant[3]);             ok = true;         }                  // Si ha habido movimiento se continua el proceso         if (ok) {             idProceso = setTimeout('moverCapa(document.getElementById("'+obj.id+'"), '+x+', '+y+')', 1);         }     }          // Cuando se mueve el raton por la tapadera     // se llama al movimiento de la imagen     function movimiento(evt) {         if (idProceso != null) {             clearTimeout(idProceso);             idProceso = null;         }         evt = evt? evt: window.event;         var posX = evt.offsetX? evt.offsetX : evt.layerX;         var posY = evt.offsetY? evt.offsetY : evt.layerY;         var destino = evt.target? evt.target : evt.srcElement;         idProceso = setTimeout('moverCapa(document.getElementById("'+"img"+destino.id.substring(3)+'"), '+posX+', '+posY+')', 1);     }     // Para el movimiento del ratón     function paraMovimiento() {         if (idProceso != null) {             clearTimeout(idProceso);             idProceso = null;         }             }     // Modifica las imágenes añadiéndoles     // la lupa y el efecto zoom     function cambiarImagenes() {         var _imgs = document.getElementsByTagName("IMG");         var imgs = new Array();         // Creo una copia de la lista, porque como se va a modificar         // la lista de imagenes, se pierden las referencias         for (var i=0; i<_imgs.length; i++) {             imgs[i] = _imgs[i];         }                  var len = imgs.length;         for (var i=0; i<len; i++) {             if (imgs[i].getAttribute("permiteZoom")) {                 var padre = imgs[i].parentNode;                 imgs[i].id = "img"+i;                      // Capa contenedora                 var div = document.createElement("DIV");                 div.style.width = imgs[i].style.width;                 div.style.height = imgs[i].style.height;                 div.style.position = "relative";                 div.id="div"+i;                 div.setAttribute("zoom", "0");                                  // Se inserta la capa contenedora                 padre.insertBefore(div, imgs[i].nextSibling);                 div.appendChild(imgs[i]);                 imgs[i].style.width = imgs[i].style.width;                 imgs[i].style.height = imgs[i].style.height;                      // Se crea la tapadera                 var tapadera = document.createElement("DIV");                 tapadera.style.position = "absolute";                 tapadera.style.display = "none";                 tapadera.style.top = "0px";                 tapadera.style.left = "0px";                 tapadera.style.width = "100%";                 tapadera.style.height = "100%";                 tapadera.style.background = "url(sp.gif)";                 tapadera.id = "tap"+i;                 tapadera.onmousemove = movimiento;                 tapadera.onmouseout = paraMovimiento;                                  div.appendChild(tapadera);                      // Se crea la capa que contiene la lupa                 var divlupa = document.createElement("DIV");                 divlupa.style.width = "14px";                 divlupa.style.height = "14px";                 divlupa.style.position = "absolute";                 divlupa.style.top = "2px";                 divlupa.style.left = "2px";                 divlupa.id = "cont"+i;                                  // Se crea el enlace de la lupa                 var enlacelupa = document.createElement("A");                 enlacelupa.href="javascript: iniciaZoom("+i+")";                                  // Se crea la imagen de la lupa                 var lupa = document.createElement("IMG");                 lupa.src = "lupa.png";                 lupa.style.border = "0px";                 lupa.style.width = "14px";                 lupa.style.height = "14px";                                  // Se insertan los elementos creados                 enlacelupa.appendChild(lupa);                 divlupa.appendChild(enlacelupa);                                  div.appendChild(divlupa);             }         }     }