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 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>