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

Question

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

Я попробовал это:

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

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

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

Answer 1

• ОПЦИЯ 1:
• Увеличение внутри изображения div

ДЕМО ЗДЕСЬ

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

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

ДЕМО ЗДЕСЬ

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

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