Come posso personalizzare JQuery Loupe per avere una lente circolare?

Question

Apprezzerei i pensieri di qualsiasi javascript / css ninjas su come posso personalizzare:

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

Avere un'area di zoom circolare anziché rettangolare? Esiste un'opzione per impostare una classe CSS per il loupe.

Si prega di notare che questa è una domanda sulla libreria collegata sopra. Ho già cercato su Google per altre librerie. Voglio mantenere il JS il più piccolo possibile.

Answer 1

Dallo sviluppatore di Loupe.js:

Potresti voler guardare la loupe di Chris Iufer, che è solo un po 'più grande della mia e include alcuni campioni che usano CSS3 per ottenere una loupe rotonda:

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

Mentre il mio usa un'immagine assolutamente posizionata all'interno di un div, il suo usa l'immagine di sfondo sulla divisione di div e la posizione di sfondo per spostare l'immagine, quindi funziona CSS3 Border-Radius.

Answer 2

Immagino che il modo più semplice per farlo sia utilizzare il ra-radius di confine CSS3, che è supportato dalle versioni moderne di tutti i browser Web (no, IE inferiore alla versione 9).

Se lo hai nel tuo Javascript

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

Mettilo nel tuo CSS:

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

... e tutte le vecchie versioni di IE mostreranno solo un quadrato, che forse è ok nel tuo caso?