Geek Answers Handbook

How to set jquery loupe to round lens?

I would appreciate any javascript / css ninjas from how I can customize:

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

To have a circular zoom area instead of a rectangular one? There is an option to set the css class for the loop.

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

0
javascript jquery css
source share
2 answers

From the developer loupe.js:

you can look at chris iufer loupe, which is slightly larger than mine, and includes several samples that use css3 to achieve a round magnifier:

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

while mine uses an absolutely positioned image inside a div, it uses a background image on a div and background-position to move the image, so it works with border-radius css3 borders.

+1
source share

I think the easiest way to do this is to use the CSS3 border radius, which is supported by modern versions of all web browsers (without IE below 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 probably okay?

+3
source share

More articles:


All Articles