Увеличение изображения для Mootools

Question

Я хочу включить в него такой масштаб изображения, как http://www.magictoolbox.com/magiczoom/, но я не нашел подобной библиотеки для mootools. Вот это моя страница изображение выглядит следующим образом:

Я попытался это:

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

Но это увеличивает внутренний образ (не рядом с ним) и разорвать все мои дизайн изображения (изображения в cetered по ширине и высоте)

here is my fiddle: http://jsfiddle.net/94PLv/ 

Answer 1

• ВАРИАНТ 1:
• Увеличение внутри изображения DIV

DEMO HERE

Вам нужно что-то вроде:

document.getElements('.inner a').addEvent('click', function (e) { 
    e.stop(); 
    dragit = this.getElement('img').makeDraggable(); 
    this.getElement('img').removeClass('max_limit'); 
}); 

Я установил ваш скрипку немного, это то, что вы искали? Я удалил некоторые из встроенных CSS и добавил Mootools More, чтобы вы могли перетаскивать вместо полос прокрутки.

Добавлено также

document.getElements('.fotoDiv .inner img').addClass('max_limit'); 
document.getElements('.fotoDiv .inner img').setProperty('style',''); 

"навести обратно" на следующий палец мыши.

• ВАРИАНТ 2:
• используя Louper плагин

DEMO HERE

Код добавлен:

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