jqzoom 对多个图像进行缩放

Question

我有一张主图像和多个缩略图的标准设置，可以单击这些缩略图来更改主图像。我在主图像上使用 jqzoom，但遇到了主图像更改和缩放图像变成空白的常见问题。通过查看堆栈溢出，我发现了一些声称可以纠正此问题的代码，并且在某种程度上确实如此。但它并没有允许每个更改的图像进行缩放，而是使主图像只是到大版本的链接，绕过 jqzoom 函数调用。

显示两个示例： 使用标准 jqzoom 代码和缩略图不显示缩放： http://designerspider.net/clients/jge/project2.php?id=17

添加的代码和图像刚刚成为链接： http://designerspider.net/clients/jge/project.php?id=17

我添加的代码是

 $(".thumbs a").click(function(){  

      $(".jqclass").unbind();

      $(".jqclass").jqzoom(options);

      return false;
  };

如果有人可以看到我是否错过了任何内容，或者需要以不同的方式进行操作，我将不胜感激。我不明白为什么添加额外的功能会禁用主要的 jqzoom 功能：/

Answer 1

您可能会发现，由于您同时使用两个功能，一个用于更改图像，另一个用于取消绑定缩放功能，然后重新绑定它，所以第二个功能在图像更改之前完成。所以当图像确实改变时，它仍然不起作用。

第二个问题，你实际上并没有解除任何东西的绑定。

因此，首先尝试更改为：

$(".jqclass").unbind(".jqclass");

或者，您可以将更多内容迁移到 jQuery。我已经测试过这个：

你的 HTML 看起来像这样：

<div class="projectphotos">
    <div id="photo_1">
        <a href="http://designerspider.net/clients/jge/projects/h07_03_11_12_10_58.jpg" class="jqclass">
            <img src="http://designerspider.net/clients/jge/projects/h07_03_11_12_10_58.jpg" class="projectimg2" alt="Mid 15th C Oakeshott Type XXa" />
        </a>
    </div>
    <div id="photo_2" style="display:none;">
        <a href="http://designerspider.net/clients/jge/projects/h07_03_11_12_19_49.jpg">
            <img src="http://designerspider.net/clients/jge/projects/h07_03_11_12_19_49.jpg" class="projectimg2" alt="Mid 15th C Oakeshott Type XXa" />
        </a>
    </div>                                       
    <div class="thumbsdiv">
        <ul class="thumbs">
            <li>
                <img rel="photo_1" src="http://designerspider.net/clients/jge/projects/h07_03_11_12_10_58.jpg" width="80" />
            </li>
            <li>
                <img rel="photo_2" src="http://designerspider.net/clients/jge/projects/h07_03_11_12_19_49.jpg" width="80" />
            </li>
        </ul>
    </div>
</div>

你的 jQuery 像这样，我已经解释了每一行：

var options = {
    zoomWidth: 250,
    zoomHeight: 250,
    position: 'right',
    yOffset: 0,
    xOffset: 0,
    title: false
}
$(".jqclass").jqzoom(options);

// Make the thumbnail look clickable:
$(".thumbs img").each(function() {
    $(this).css('cursor', 'pointer');
});
// React to clicking on a thumbnail:
$(".thumbs img").click(function() {
    // Get the photo linked to:
    var photo = $(this).attr('rel');
    // Unbind the zoom:
    $(".jqclass").unbind(".jqclass");
    // Hide the current image via its parent DIV:
    $(".jqclass").parent().hide();
    // Remove teh jqclass:
    $(".jqclass").removeClass("jqclass");
    // Show the clicked photo:
    $("#"+photo).show();
    // Add the class and the zoom:
    $("#"+photo+" a").addClass("jqclass").jqzoom(options);
});

Answer 2

这是从 jQZoom 中清理数据的方法：

$('.jqclass').removeData('jqzoom');

因为 jQZoom 按以下方式保存对象数据：

$(el).data("jqzoom", obj);