javascript - Image zoom for Mootools -

i whant include image zoomer http://www.magictoolbox.com/magiczoom/ in page, don't found similar library mootools. here page image like:

i tried this:

http://mootools.net/forge/p/zoomer

but zooms inner image (not near it) , break images design (images cetered width , height)

here fiddle: http://jsfiddle.net/94plv/ 

• option 1:
• zooming inside image div

demo here

you need like:

document.getelements('.inner a').addevent('click', function (e) {     e.stop();     dragit = this.getelement('img').makedraggable();     this.getelement('img').removeclass('max_limit'); }); 

i fixed fiddle bit, looking for? removed of inline css , added mootools more can have drag instead of scrollbars.

added

document.getelements('.fotodiv .inner img').addclass('max_limit'); document.getelements('.fotodiv .inner img').setproperty('style',''); 

to "put things back" on next thumb click.

• option 2:
• using louper plugin

demo here

code added:

//new added document.getelements('.inner a').addevent('click', function(event) {     event.stop(); }); var loupe = {     src: 'http://img.artlebedev.ru/studio/us/2009/loup.png',     x: 101,     y: 102,     radius: 85 }; document.getelements('a.click').addevent('click', function(event) {     var id = this.getproperty('rel');     var target_el = document.id('im_' + id).getelement('img');     new louper(target_el, {         big: target_el.src,         radius: 80,         loupe: loupe,         onready: function() {             this.loupewrapper.setstyles({                 left: this.smallsize.width - this.loupesize.width + 60,                 top: this.smallsize.height - this.loupesize.height + 120             });         }     }); });