JMiur [E]

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 o este otro modificado y adaptado para usar en Blogger

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.

El resultado, puede verse en este ejemplo:


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

13 comentarios:

Eulalia  

Muy buena la lupa sobre homer Simpson!
Y me ha encantado ver en el mapa, Puerto Rico, pues mi hija vive alli.
Saludos.

Responder
JMiur  

Lo confieso, si intenté ver cómo funcionaba, sólo fue por la cabeza de Homero :D

Responder
Protegon  

Wow, se logra un efecto impresionante :D

Responder
CHiCken  

üüüüü ya esta en mi blog :D
http://myestilodeyo.blogspot.com

Responder
aguleo  

Muy divertido un día de estos lo probaré, gracias! :)
Saludos

Responder
CHiCken  

al momento de estar cargando la pagina la imagen de la lupa es visible pero cuando termina de cargar la pagina se quita y no aparece, qe puede ser?

Responder
CHiCken  

ola Jmiur ya esta todo en orden, la vdd no se que era pero ya esta como nuevo podras verla en esta entrada: http://myestilodeyo.blogspot.com/2010/01/imagenes-ocultas.html

Responder
lalo89  

gracias tu pagina me a ayudado mucho apenas estoy enpesando con esto del codigo y necesito una ayuda encontre esta pagina
http://www.summarg.com/2011/efecto-de-lupa-con-imagelens/
hay un efecto similar solo que lo que queria era agregarle una imgen de lupa como lo que pones aqui pero no se como hacer eso busque e intente cambiar el puntero por una lupa lo pone pero no queda centrado supongo q s por que toma la esquina superior izuierda como la punta del puntero( lo ce por que al poner una imagen con fondo ahi quedo la esquine en el centro del circulo de uemnto me podrias ayudar con esto y hay forma de contactarte por correo por preguntas de los temas que publicas aqui?) y de antemano gracias por tu ayuda

Responder
JMiur  

Aparentemente, allí se usa CSS para establecer ese círculo que simula la lupa y ese CSS está definido por una serie de opciones que luego son parte del script:
var lensStyle .......
Habría que ver tu ejemplo para saber si es posible agregar propiedades extras y cuales serían. Probablemente, también deberían cambiarse otros detalles del script.

Responder
lalo89  

bueno como apenas empiezo no tengo nada de idea sobre js y apenas empiezo con css y ocupó el digo tal cual y quería agregar la lupa y evitar que se vea el cursor espero no estar molestando tanto pero el codigo de aqui me sirve pero el otro me deja aplicarlo en varias imagenes

Responder
lalo89  

una duda mas he visto que usas en en algunos ejemplos que pones aqui codigo script fuera del head y lo pones dentro del body yo lo pongo de todas formas dentro del head eso esta bien no me cusara problemas o se puede usar script dentreo del body

Responder
JMiur  

Los scripts pueden ir en diferentes partes, depende de cada caso, de lo que hagan o para que se los utiliza.

Responder

¿Quiere dejar un comentario?

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

Todos los archivos y demos alojados en Fileden han sido redireccionados y deberían estar funcionando correctamente.
De todos modos, también puede accederse a ellos a través de SkyDrive

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