Come posso personalizzare JQuery Loupe per avere una lente circolare?
-
27-10-2019 - |
Domanda
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.
Soluzione 2
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.
Altri suggerimenti
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?