How can I customise jquery loupe to have a circular lens?

Question

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 instead of rectangular one? There is an option to set a css class for the loupe.

Please note that this is a question about the library linked above. I have already googled for other libraries. I want to keep the js as small as possible.

score 3 · Answer 1 · answered May 02 '11 at 11:29

3

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 magnifier
    height: 150, // height of magnifier
    loupe: '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?

answered May 02 '11 at 11:29

Fred Bergman

1,949
5
22
30

Thanks for your reply. The loupe is a div without a border. I can add a border and get that to curve but the div containing the zoom area remains rectangular (and on top) – codecowboy May 02 '11 at 13:20
@codecowboy: Execute this bit of javascript with Firebug on the demo page and you'll see that it works in some of the examples: `jQuery('.zoomPup').css('-moz-border-radius', '150px')`. Link to the demos page: http://www.mind-projects.it/projects/jqzoom/demos.php – Wolph May 02 '11 at 22:45
1

@codecowboy: The border-radius has nothing to do with the normal border, so you don't need to apply a border to your div. You can read about border-radius here: http://www.css3.info/preview/rounded-border/ – Fred Bergman May 03 '11 at 19:19
@WQoLpH this isnt a question about jqzoom – codecowboy May 04 '11 at 06:39
@codecowboy: my bad... the answer holds though. Fred Bergman his answer works just fine for jQzoom – Wolph May 04 '11 at 08:51

score 1 · Accepted Answer · answered May 04 '11 at 08:23

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.

How can I customise jquery loupe to have a circular lens?

2 Answers2

Linked