如何使用jqzoom放大一组元素

Question

我正在使用Jqzoom为给定图像提供缩放。这些图像并排放置，每个图像具有相同的尺寸。我想找到一种方法在同一时间对所有图像进行相同的缩放。

Code @ jsfiddle：http://jsfiddle.net/Fam43/23/

示例IMG：

示例HTML代码：

  <div>
    <!-- Omitted stuff here -->
    <a href="img1_big.png" class="zoom">
      <img src="img1.png" width="100%" />
    </a>
  </div>

  <div>      
    <!-- Omitted stuff here -->
    <a href="img2_big.png" class="zoom">
      <img src="img2.png" width="100%" />
    </a>
  </div>

  <div>
    <!-- Omitted stuff here -->
    <a href="img3_big.png" class="zoom">
        <img src="img3.png" width="100%" />
    </a>
  </div>

JQZoom功能：

$('.zoom').jqzoom({
   zoomType: 'innerzoom'
});

Answer 1

在考虑了这种情况后，我想出了以下内容：

在第一部分的jqZoom 2.3中有一个$.extend(obj. {，其中一个成员是init:，该函数替换了设置鼠标事件的部分：

mouseenter mouseover事件结束时：

$(".zoomPad", el).bind('mouseenter mouseover', function(event) {
    // *snip
    if (settings.linked && event.srcElement === this) {
        $(settings.linked).not(el).find(".zoomPad").trigger('mouseover');
    }
});

像这样更改mouseleave功能：

$(".zoomPad", el).bind('mouseleave', function(event, notSource) {
    obj.deactivate();
    if (settings.linked && !notSource) {
        $(settings.linked).not(el).find(".zoomPad").trigger('mouseleave', [true]);
    }
});

鼠标移动功能需要更改参数并添加函数开头和结尾的代码：

$(".zoomPad", el).bind('mousemove', function(e, thisx, thisy) {
    if (thisx && thisy) {
        e = $.extend(e, {
            pageX: (thisx + this.offsetLeft),
            pageY: (thisy + this.offsetTop)
        });
    }

    // *snip*

    if (settings.linked && !(thisx && thisy)) {
        $(settings.linked).not(el).find(".zoomPad").trigger('mousemove', [e.pageX - this.offsetLeft, e.pageY - this.offsetTop]);
    }
});

我的例子： http://jsfiddle.net/7FQHt/

集成OP的例子： http://jsfiddle.net/Fam43/24/

您甚至可以将链接限制为仅限一个项目：http://jsfiddle.net/Fam43/25/ 或 http://jsfiddle.net/Fam43/26/

这可能对您没有任何意义，这没关系，只要问我一个问题。有些事情在我脑海里有意义而不是你的。