Una lupa sobre las imágenes

Loupe es un pequeño script que nos permite agregar una lupa a las imágenes que insertamos en una página web y funciona en la mayoría de los navegadores actuales.

Para usarla podemos descargar este ZIP que nos ofrecen donde se incluyen varias páginas de ejemplo.

Hay dos archivos JS necesarios que deben alojarse en un servidor propio, uno es el script genérico y el segundo es una adaptación para Internet Explorer. Los agregamos en la plantilla antes de </head>:

<script type="text/javascript" src="URL_loupe.js></script>
<!--[if gte IE 6]>
<script type="text/javascript" src="URL_loupeIE.js"></script>
<![endif]-->

Hay varios modos de utilizarlo y algunos parámetros que pueden configurarse. Veamos la más sencilla:

<div>
<img id="unNombre" onLoad="initLoupe(this.id);" src="URL_imagen" width="ancho" height="alto" />
</div>

Donde:

unNombre es el identificador único de la imagen

en src colocamos la dirección de la imagen que, por lógica debe ser "grande" o "muy grande"

con los parámetros width="ancho" y height="alto" lo que vamos a hacer es mostrarla de un tamaño menor

La función tiene la siguiente sintaxis:

initLoupe(arg1[,arg2][,arg3][,arg4][,arg5])

y el único argumento obligatorio es el primeo que es el ID de la imagen.

Los siguientes argumentos son opcionales:

arg2 si es true, la lupa es visible y no hay necesidad de hacer click en el ícono para mostrarla (por defecto, es false)
arg3 la posición horizontal inicial de la lupa expresada en pixeles
arg4 la posición vertical inicial de la lupa expresada en pixeles
arg5 si es true se muestra un cursor tipo crosshair en la lupa (por defecto, es false)

Veamos un ejemplo con algunos parámetros y un pequeño truco; vamos a mostrar una imagen pero, "la ampliación" nos mostrará otra:

<div style="position:relative;">
<img 
id="nombre"
onLoad="initLoupe(this.id,true);"
src="URL_imagenOculta"
style="z-index: -1; cursor:wait;"
width="anchoVisible" height="altoVisible" />
<div
style="position:absolute; left:0; top:0;
width:anchoVisiblepx; height:altoVisiblepx;
background: #color url(URL_imagenVisible) no-repeat;">
</div>
</div>

Creamos un bloque donde la propiedad position esté definida como relative. Adentro, colocamos la imagen oculta (la que se mostrará al pasar la lupa). Luego, agregamos otro bloque DIV al que posicionamos en forma absoluta y lo ubicamos encima de la imagen anterior. Como está encima, si le agregamos un fondo con otra imagen, esta última, tapará la primera.

En el sitio, aconsejan no utilizar el script con varias imágenes en la misma página y, cualquier detalle, puede consultarse la FAQ.