Desen Web

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.

Ejemplo: