Louper

Louper is simple and nice image zoom class which use real loupe (not rectangle)

How to use

demo

options:

• big - big image src (you can be used img big attribute instead if you want)
• radius(integer) - loupe radius
• loupe - loupe object {src: src, x: x, y: y, radius: radius} contains info about loupe image - image src, circle coords and radius

events:

• ready - fires on images load

Example1:

html:

#html
<img src="gomer-small.jpg" id="homer" big="gomer.jpg"/>

js:

#js
var loupe = {
    src: 'loupe2.png',
    x: 111,
    y: 109,
    radius: 103
}
new Louper('homer', {
    radius: 30,
    loupe: loupe
});

Example2:

html:

#html
<img src="girl-thumb.jpg" id="girl"/>

js:

#js
new Louper('girl', {
    big: 'girl.jpg',
    radius: 80,
    loupe: {
        src: 'loupe.png',
        x: 101,
        y: 102,
        radius: 85
    },
    onReady: function(){
        this.loupeWrapper.setStyles({
            left: this.smallSize.width - this.loupeSize.width + 60,
            top: this.smallSize.height - this.loupeSize.height + 120
        });
    }
});

Example3:

html:

#html
<img src="small.jpg" id="brain" big="big.jpg"/>

js:

#js
var loupe2 = {//loupe image circle coords and radius
    src: 'loupe2.png',
    x: 111,
    y: 109,
    radius: 103
}
new Louper('brain', {
    loupe: loupe2,
    radius: 100
});