Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
zoom image using real loupe (not rectangle)
JavaScript
branch: master

Fetching latest commit…

Cannot retrieve the latest commit at this time

Failed to load latest commit information.
Demo
Source
README.md
package.yml

README.md

Louper

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

Screenshot

How to use

demo

docs

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
});
Something went wrong with that request. Please try again.