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
});