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

jqzoom在多个图像上

2 个答案: