图像放大Mootools

Question

我想在我的页面中包含像http://www.magictoolbox.com/magiczoom/这样的图像缩放器，但我没有找到任何类似的mootools库。这是我的页面图像：

我试过了：

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

但是它会缩放内部图像（不在它附近）并打破我的所有图像设计（图像被宽度和高度所覆盖）

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