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


Tags: javascript,jquery,css,loupe

Problem :

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.



Solution :

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.


    CSS Howto..

    How to use CSS with JS [duplicate]

    How to show a default SVG Fill Color on jQuery mouseout / mouseleave?

    How to get logo to front layer

    How do you set the background color for a variable height page?

    how to align elements using css in angular typeahead

    HTML CSS - How to render SQL nicely [closed]

    How do you tell a browser, “if you need to wrap, wrap here first”?

    how to make header title with buttons

    how to use css to display multiple posts in inline-block like google+

    How to apply CSS only if class exists elsewhere in code?

    How to stop CSS/HTML navigation menu wrapping at different resolutions?

    how to use CSS opacity to let background bleed through in IE8?

    How do i cover the rail of an Ajax Slider Extender when i move the handle from step 0 to step 50 and have those steps colored gray?

    How to offset div columns in CSS grid system

    How to build a special polygon (a kite shape) with HTML & CSS only?

    php search result images show across and fill a CSS div

    How to apply CSS color on parent element using a color picker?

    How to center text over an image while keeping it below fixed nav bar in css?

    how to add classes to the dropdown menu in the TinyMCE table editor

    How to create a horizontal calendar with nested lists?

    How can I make this menu using only anchor tag and css Not using ul and li?

    How to make a slider with divs and variable width?

    How to change the background color(on hover) and css(height/width) of a select option?

    How do I give a JavaFX TextField a Swing-style lowered bevel border?

    CSS: How to force objects to stay inside container but allow full width background? [duplicate]

    How to set style class to another class depends on selector?

    How to use CSS on HTML made by TextEdit?

    DevTools: How to visualize scss changes automatically without the need to save

    How to place background image behind page content?

    How to start css animation on speciefic height of webpage