javascript - 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

你可能会发现，因为你并排使用了两个函数，一个是换图，另一个是解绑缩放功能，然后重新绑定(bind)，第二个函数在换图之前就结束了。因此，当图像确实发生变化时，它仍然无法正常工作。

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

所以，首先尝试更改为:

$(".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);
});