Clicky

Magnifier.js, efecto de lupa sobre una imagen

Magnifier.js, efecto de lupa sobre una imagen

Magnifier.js es una librería Javascript que permite un efecto de lupa sobre una imagen.

Características

• Acercar la funcionalidad de entrada/salida con la rueda del ratón
• La imagen ampliada se puede visualizar en la propia lente o fuera de ella en una envoltura
• Unión de las funciones definidas por el usuario para entrar, moverse y salir de las miniaturas y eventos de zoom de la imagen
• Mostrar texto de carga, mientras que se está cargando la imagen grande, y cambiar a la lente una vez que está cargada

Magnifier.js utiliza Event.js como un cross-browser para el control de eventos de wrapper, el cual está disponible en Github y JSClasses.org

Funciona en Chrome, Firefox, Safari, IE 7, 8, 9 y 10.

Licenciado bajo la licencia MIT, © 2013 Mark Rolich

El código fuente está disponible en Github.

Magnifier.js se pueden utilizar tanto para imágenes individuales como múltiples, así como galerías utilizando en la configuración la opción dinámica en la navegación de la galería:

De un vistazo

Incluye magnifier.css en la sección de encabezado del documento HTML

<link rel="stylesheet" type="text/css" href="/magnifier.css">

Vamos a crear ejemplo de marcado HTML

<div>
    <a class="magnifier-thumb-wrapper" href="http://en.wikipedia.org/wiki/File:Starry_Night_Over_the_Rhone.jpg">
        <img id="thumb" src="http://upload.wikimedia.org/wikipedia/commons/thumb/9/94/Starry_Night_Over_the_Rhone.jpg/200px-Starry_Night_Over_the_Rhone.jpg">
    </a>
    <div class="magnifier-preview" id="preview" style="width: 200px; height: 133px">Starry Night Over The Rhone<br>by Vincent van Gogh</div>
</div>

La imagen que tenemos que aplicar con el efecto lupa debe ser envuelta en un elemento de nivel de bloque con posición relativa, por lo que asignaremos la clase CSS magnifier-thumb-wrapper definida en magnifier.css al enlace de envolver la imagen. El elemento donde mostramos la imagen ampliada debe tener la clase CSS magnifier-preview.

Incluye librerías Javascript e inicializa la lupa

<script type="text/javascript" src="/Event.js"></script>
<script type="text/javascript" src="/Magnifier.js"></script>
<script type="text/javascript">
var evt = new Event(),
    m = new Magnifier(evt);
</script>

Configura las opciones de la lupa

m.attach({
    thumb: '#thumb',
    large: 'http://upload.wikimedia.org/wikipedia/commons/thumb/9/94/Starry_Night_Over_the_Rhone.jpg/400px-Starry_Night_Over_the_Rhone.jpg',
    largeWrapper: 'preview'
});

Resultado (mouseover para ampliar)

Starry Night Over The Rhone
by Vincent van Gogh

Magnifier.js soporta los atributos de datos, el código anterior se podría escribir de la siguiente manera:

<div>
    <a class="magnifier-thumb-wrapper" href="http://en.wikipedia.org/wiki/File:Starry_Night_Over_the_Rhone.jpg">
        <img id="thumb" src="http://upload.wikimedia.org/wikipedia/commons/thumb/9/94/Starry_Night_Over_the_Rhone.jpg/200px-Starry_Night_Over_the_Rhone.jpg"
        data-large-img-url="http://upload.wikimedia.org/wikipedia/commons/thumb/9/94/Starry_Night_Over_the_Rhone.jpg/400px-Starry_Night_Over_the_Rhone.jpg"
        data-large-img-wrapper="preview">
    </a>
    <div class="magnifier-preview" id="preview" style="width: 200px; height: 133px">Starry Night Over The Rhone<br>by Vincent van Gogh</div>
</div>

y el Javascript

m.attach({thumb: '#thumb'});

Es posible adjuntar lupa a varias imágenes asignando un nombre de la clase para la propiedad thumb y proporcionar imágenes de gran tamaño a través de el atributo data data-large-img-url

<img src="http://example.com/image1.jpg" class="img" data-large-img-url="http://example.com/large-image1.jpg">
<img src="http://example.com/image2.jpg" class="img" data-large-img-url="http://example.com/large-image2.jpg">
<img src="http://example.com/image3.jpg" class="img" data-large-img-url="http://example.com/large-image3.jpg">
m.attach({
    thumb: '.img',
    largeWrapper: 'preview'
});

Hagamos la ventana de vista previa más grande (2x el tamaño de la imagen)

...
<div class="magnifier-preview" id="preview" style="width: 400px; height: 267px">Starry Night Over The Rhone<br>by Vincent van Gogh</div>
...

 

Y establecer el nivel de zoom con 3

m.attach({
    thumb: '#thumb',
    large: 'http://upload.wikimedia.org/wikipedia/commons/thumb/9/94/Starry_Night_Over_the_Rhone.jpg/1200px-Starry_Night_Over_the_Rhone.jpg',
    largeWrapper: 'preview',
    zoom: 3
});
Starry Night Over The Rhone
by Vincent van Gogh

Magnifier.js aumenta automáticamente el nivel de zoom si el tamaño de la ventana de vista previa es más grande que el tamaño de la miniatura (en nuestro ejemplo, por 2, el nivel de zoom de modo real es 6)

Magnifier.js pueden mostrar una imagen ampliada en el interior de la lente:

m.attach({
    thumb: '#thumb',
    large: 'http://upload.wikimedia.org/wikipedia/commons/thumb/9/94/Starry_Night_Over_the_Rhone.jpg/1200px-Starry_Night_Over_the_Rhone.jpg',
    mode: 'inside',
    zoom: 3,
    zoomable: true
});

Nótese que en este caso no hay necesidad de especificar un gran envoltorio de imagen.

Vista Deeper

La lista completa de las opciones de la lupa

lista completa de las opciones de la lupa

Además del método attach, todas las opciones, se pueden establecer a nivel global excepto thumb y large en la inicialización de la lupa, y luego anularlas de forma individual utilizando el método attach:

m = new Magnifier(evt, {
    zoom: 3,
    zoomable: true,
    ...
});

Además, se pueden omitir los parámetros en las llamadas posteriores del método attach una vez que se ha configurado (si globalmente o no), Magnifier.js utiliza valores de las opciones de la última configuración encontrada (para zoom y mode se utiliza el valor único global o por defecto), manteniendo en cuenta que el thumb se debe especificar siempre en las opciones de objeto (si no está establecido large, será utilizada en su lugar la imagen en miniatura).

Una vez que se llaman, los controladores de eventos definidos por el usuario reciben como argumento el objeto con las siguientes propiedades:

onthumbenter, onthumbmove y onthumbleave

onthumbenter, onthumbmove y onthumbleave

onzoom

onzoom

Un ejemplo de las funciones attachment definidas por el usuario:

m.attach({
    thumb: '#thumb2',
    large: 'http://upload.wikimedia.org/wikipedia/commons/thumb/9/94/Starry_Night_Over_the_Rhone.jpg/1600px-Starry_Night_Over_the_Rhone.jpg',
    largeWrapper: 'preview2',
    zoom: 2,
    zoomable: true,
    onthumbenter: function () {
        document.getElementById('enter').innerHTML = 'Mouse enter';
        document.getElementById('leave').innerHTML = '';
        document.getElementById('zoom').innerHTML = '';
    },
    onthumbmove: function () {
        document.getElementById('move').innerHTML = 'Mouse move';
    },
    onthumbleave: function () {
        document.getElementById('enter').innerHTML = '';
        document.getElementById('move').innerHTML = '';
        document.getElementById('zoom').innerHTML = '';
        document.getElementById('leave').innerHTML = 'Mouse leave';
    },
    onzoom: function (data) {
        document.getElementById('zoom').innerHTML = 'Zoom: ' + data.zoom;
    }
});

 

 
 
 
 
Starry Night Over The Rhone
by Vincent van Gogh

Pues parece que no funciona del todo bien en mi página debido a que tengo mezclados los estilos CSS de Joomla y de este artículo en particular. Aquí podéis ver una demo en acción

Jesus_Caceres