如何使用jqzoom放大一组元素

Question

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

代码@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({
   缩放类型：'innerzoom'
});

Answer 1

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

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

在 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/ 或 <一个href="http://jsfiddle.net/Fam43/26/" rel="nofollow">http://jsfiddle.net/Fam43/26/

这对你来说可能不是 100% 有意义，那就是好的，请问我一个问题。有些事情在我的头脑中有意义，但在你的头脑中却不然。