Loupe.js, amplia tus imágenes

0
935

La nota anterior hablo acerca de como aplicar un zoom a una imagen. Un objetivo similar tiene esta utilidad llamada Loupe.js , la cual muestra una lupa sobre tus imágenes y amplia la parte donde está ubicada esta. Eso si, necesitas dos imágenes, una que será la muestra por donde se paseará la lupa y la otra debe ser una imagen original (por supuesto una imagen grande). Trabaja sobre Firefox 1.5+, Opera 9+ y Safari.

¿Cómo usarlo?

Ejemplo básico de como usar esta utilidad. Basta con hacer referencia al archivo JavaScript y especificar en el evento onLoad la función initLoupe con dos parametros.

<html>
<head>
<title>Loupe.js</title>
<script src="loupe.js" type="text/javascript"></script>
</head>
<body>
<div style="margin:auto;width:356px; height:205px; background:url(images/muestra.jpg) no-repeat;">
<img id="caribbean" onLoad="initLoupe(this.id,true);" src="images/original_grande.jpg" style="cursor:wait;" width="356" height="205" alt="large image" border="0" />
</div>
</body>
</html>

 

Amplia tus imagenes

 

Compartir
Artículo anteriorTJPzoom, zoom para tus imágenes
Artículo siguienteVideos introductorios a Ruby
Programador y Desarrollador Web. Administrador de RibosoMatic y Proyecto Yupy. Blogger y entusiasta de la tecnología, internet, software, hardware, gadgets y tutoriales para desarrollo de aplicaciones para la web ....