Logo de islavisual
Isotipo de islavisual IslaVisual
imagen de sección

Ultima revisión 06/12/2012

Lupa de aumento en jQuery

El otro día encontré el plugin que hoy os presento. Se trata de un plugin de jQuery que hace de lupa de aumento en imágenes y se llama mlens. Cuenta con varios parámetros configurables tales como la forma de la lente, el tamaño, el tamaño del borde, color del borde y el redondeado del borde.

mlens image

mlens es simple aunque potente, y puede ser configurado fácilmente a través de los parámetros que acabo de comentar. Además dispone de versiones mínima (min), desarrollador (dev) y mínima comprimida (min.gz).

Podemos descargar la librería desde mlens y seguir las instrucciones. A continuación os dejo las instrucciones en castellano aunque están también en la página oficial.

Ficheros a incluir

<script type="text/javascript" src="js/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="js/jquery.mlens-1.0.min.js"></script>

HTML

Sólo necesita 2 imágenes, una en tamaño ajustado y otra en alta resolución que seran asociadas a un ID (green_monster).

<img id="green_monster" src="images/GreenMonster_640px.jpg" alt="green monster" data-big="images/GreenMonster_1280px.jpg" />

CSS

Se puede poner estilos a la imagen como por ejemplo

#green_wrapper {
    position: relative;
    width: 640px;
    height: auto;
    margin: 0 auto;
    border: 12px solid #fff;
    border-radius: 10px;
    box-shadow: 1px 1px 5px rgba(50,50,50 0.5);
    float: left;
}

jQuery

Y ponemos el script necesario para cargarlo cuando la página esté lista.

<script type="text/javascript">
$(document).ready(function()
{
    $("#green_monster").mlens(
    {
        imgSrc: $("#green_monster").attr("data-big"),    // path of the hi-res version of the image
        lensShape: "circle",                // shape of the lens (circle or square)
        lensSize: 180,                    // size of the lens (in px)
        borderSize: 4,                    // size of the lens border (in px)
        borderColor: "#fff",                // color of the lens border (#hex)
        borderRadius: 0                    // border radius (optional, only if the shape is square)
    });
});
</script>

Sobre el autor

Imagen de Pablo Enrique Fernández Casado
Pablo Enrique Fernández Casado

CEO de IslaVisual, Manager, Full Stack Analyst Developer y formador por cuenta ajena con más de 25 años de experiencia en el campo de la programación y más de 10 en el campo del diseño, UX, usabilidad web y accesibilidad web. También es escritor y compositor de música, además de presentar múltiples soft kills como la escucha activa, el trabajo en equipo, la creatividad, la resiliencia o la capacidad de aprendizaje, entre otras.

Especializado en proveer soluciones integrales de bajo coste y actividades de consultoría de Usabilidad, Accesibilidad y Experiencia de Usuario (UX), además de ofrecer asesoramiento en SEO, optimización de sistemas y páginas web, entre otras habilidades.