How Can I Customise Jquery Loupe To Have A Circular Lens?

I would appreciate the thoughts of any javascript / css ninjas on how I can customise: https://github.com/jdbartlett/loupe/blob/master/jquery.loupe.js To have a circular zoom area

Solution 1:

I guess the easiest way to do this is to use CSS3 border-radius, which is supported by the modern versions of all web-browsers (no IE lower than version 9).

If you have this in your javascript

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

Just put this in your css:

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

... and all old versions of IE will just show a square, which is maybe OK in your case?

Solution 2:

From the developer of loupe.js:

you may want to look at chris iufer's loupe, which is only a bit bigger than mine and includes a few samples that use css3 to achieve a round loupe:

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

whereas mine uses an absolutely positioned image within a div, his uses background-image on the div and background-position to move the image, so css3 border-radius works.