Efecto lupa con jQuery

Cuéntalo! Share on FacebookTweet about this on TwitterShare on Google+Digg thisShare on LinkedInShare on TumblrEmail this to someone

Para realizar el efecto de zoom en una imagen tan solo tenemos que utilizar una sencilla función, pero a veces una función nos puede ir mucho mas rápido que un pluguin o cualquier clase de código complicado.

La función la podéis encontrar en link

Yo he realizado unos pequeños cambios para que pueda ser compatible con todos los IE y para poder modificar la zona donde debe salir nuestro zoom:

Para ser compatible con IE, modificar:  css(‘backgroundColor’,’rgba(0,0,0)’) por css(‘backgroundColor’,’rgb(0,0,0)’) ya que la propiedad alpha no es compatible con IE (la solución seria utilizar otra propiedad propia de IE)

Para poder modificar la colocación del zoom modificamos:

var loupe = {‘width’ : 200, ‘height’: 150};

Por:

var loupe = {‘width’ : 200, ‘height’: 151, ‘left’: -200, ‘top’: 10};

Y la:

$(‘#thejLoupe’).css(‘left’,e.pageX+10).css(‘top’,e.pageY+10);

Por:

$(‘#thejLoupe’).css(‘left’,e.pageX+loupe.left).css(‘top’,e.pageY+loupe.top);
De esta forma podemos situar nuestro zoom donde querramos. Incluso en vez de utilizar-lo como zoom podemos hacer salir el contenido HTML que querramos.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *

Puedes usar las siguientes etiquetas y atributos HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>