Inicio JavaScript Loupe.js, amplia tus imágenes

Loupe.js, amplia tus imágenes

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

 

Programador y Desarrollador Web. Administrador de RibosoMatic y Proyecto Yupy. Blogger y entusiasta de la tecnología, internet, software y tutoriales para desarrollo de aplicaciones para la web ....