BLOG DE DISEÑO WEB CORUÑA

Un poco de todo, recursos, tutoriales, noticias, anuncios...

jfMagnify, efecto lupa sobre imágenes con jQuery

21/AGO/2016 3.285 visitas Ver comentarios
jfMagnify, efecto lupa sobre imágenes con jQuery

ADVERTENCIA: Este artículo tiene más de 6 meses de antigüedad. Puede que esta información ya se encuentre obsoleta o haya nuevas y mejores opciones.

jfMagnify es un plugin jQuery para crear un efecto lupa sobre un contenido especificado.

La gran diferencia con la enorme cantidad de plugins similares que existen hoy día, es que en este caso, el efecto de lupa se producirá sobre imágenes o contenido en html en lugar de imágenes únicamente.

Si miramos el código 1, veremos que para poder aplicar este efecto necesitamos, básicamente, 4 elementos que son:

  • El contenedor general aplicado con la clase "magnify".
  • Un segundo contenedor con clase "magnify_glass" que será la lupa que moveremos por nuestro contenedor magnify.
  • Un tercer contenedor con la clase "element_to_magnify" que contendrá todo el texto o imágenes que vamos a querer ampliar.
  • Y por último el elemento en sí con un atributo draggable con valor false (esto se debe a que el plugin requiere jQueryUI).

Pues bien, lógicamente, estas clases pueden ser adaptadas a nuestras necesidades y no deben, necesariamente, mantener esos nombres.

En el código 2, personalizaremos el CSS de nuestros elementos. Es importante destacar que el divisor contenedor principal (en este caso el que lleva la clase magnify) debe tener cualquier método de posicionamiento que no sea estático, es decir, su propiedad CSS position, debe ser absolute, fixed o relative, para que luego el plugin funcione correctamente.

Recordemos que además de vincular el plugin, es necesario vincular la librería jQuery y, adicionalmente, la librería jQueryUI.

Opciones configurables:

  • center: Por defecto true. Establece si la lupa toma como referencia su centro o puede configurarse desde la izquierda o arriba.
  • scale: Establece la escala de ampliación. Por defecto es 2x.
  • containment: Define el área a ampliar. Por defecto es su contenedor padre.
  • magnifyGlass: Define la lupa en sí, es decir, el elemento arrastrable. Por defecto es ".magnify_glass".
  • magnifiedElement: Clase que se agrega al elemento clonado que se está ampliando. Por defecto es ".magnified_element".
  • magnifiedZone: Area donde se verá el efecto de la lupa. Por defecto es ".magnify_glass".
  • elementToMagnify: Identifica el elemento que quieres ampliar. Por defecto es ".element_to_magnify".

Si te ha gustado o tienes dudas sobre su funcionamiento, puedes ver una demo aquí y aquí y descargarlo desde aquí.

Código 1 - HTML
<div class="magnify">
    <div class="magnify_glass"></div>
    <div class = "element_to_magnify">
        <img src="image/IMG_2209.jpg" draggable="false"/>
    </div>
</div>
Código 2 - CSS
.magnify {
    position: relative;
    width: 900px;
    height: 675px;
}
.magnify_glass {
    z-index: 100;
    position: absolute;
    overflow: hidden;
}
.element_to_magnify {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
}
#elementBeingMagnified {

}
.magnified_element {

}
Código 3 - JAVASCRIPT
$(".magnify").jfMagnify({
    center: true,
    scale:2,
    containment:'magnify',
    magnifyGlass : '.magnify_glass',
    magnifiedElement: '.magnified_element',
    magnifiedZone:'.magnify_glass',
    elementToMagnify : '.element_to_magnify',
});

Acerca del Autor...

Macadia, es una agencia de Diseño Web Coruña, especializada en maquetación css y desarrollo de páginas web a medida con más de 20 años de experiencia en el desarrollo de páginas web profesionales. Si te ha gustado este artículo, por favor, ayúdanos a difundirlo compartiéndolo con tus amigos y contactos en las distintas redes sociales que utilices. ¡Muchas gracias!

Los comentarios han sido desactivados momentaneamente a la espera de que Disqus adapte su plataforma a la próxima RGPD que entra en vigor desde el 25/05/2018