¿Cómo puedo personalizar jQuery Loupe para tener una lente circular?

Question

Agradecería los pensamientos de cualquier Ninjas JavaScript / CSS sobre cómo puedo personalizar:

https://github.com/jdbartlett/loupe/blob/master/jquery.loupe.js

¿Tener un área de zoom circular en lugar de uno rectangular? Hay una opción para establecer una clase CSS para la Loupe.

Tenga en cuenta que esta es una pregunta sobre la biblioteca vinculada anteriormente. Ya he buscado en Google otras bibliotecas. Quiero mantener el JS lo más pequeño posible.

Answer 1

Del desarrollador de Loupe.js:

Es posible que desee mirar la Loupe de Chris Iufer, que es solo un poco más grande que la mía e incluye algunas muestras que usan CSS3 para lograr una Loupe redonda:

http://chrisiufer.com/loupe/sample.html

Mientras que la mía usa una imagen absolutamente posicionada dentro de un DIV, sus usos imágenes de fondo en el DIV y la posición de fondo para mover la imagen, por lo que funciona CSS3 Border-Radius.

Answer 2

Supongo que la forma más fácil de hacerlo es usar CSS3 Border-Radius, que es compatible con las versiones modernas de todos los navegadores web (no es IE más bajo que la versión 9).

Si tienes esto en tu JavaScript

$('selector').loupe({
    width: 150, // width of magnifier
    height: 150, // height of magnifier
    loupe: 'loupe' // css class for magnifier
});

Pon esto en tu CSS:

.loupe {
-webkit-border-radius: 150px;
-moz-border-radius: 150px;
border-radius: 150px;
}

... y todas las versiones antiguas de IE solo mostrarán un cuadrado, que tal vez esté bien en tu caso?