Javascript jqzoom对多幅图像进行缩放

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

要显示这两个示例： 标准jqzoom代码和缩略图不显示缩放：

添加的代码和图像刚刚成为链接：

我添加的代码是

---

如果有人能看出我是否遗漏了什么，或者需要以不同的方式来做，我将感谢所有的建议。我不明白为什么添加额外功能会禁用jqzoom的主要功能：/

您可能会发现，因为您同时使用两个功能，一个用于更改图像，另一个用于解除缩放功能的绑定，然后重新绑定，第二个功能在图像更改之前完成。因此，当图像发生变化时，它仍然无法工作

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

因此，首先尝试更改为：

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

---

以下是从jQZoom中清除数据的方法：

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

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

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

---

这几乎是解决方案中的一个点！看看代码，它是有意义的，所以感谢您让它变得易懂：）唯一的一件小事是，在第一个图像之后的所有图像上，第二个幻影缩放窗口显示出来，其中没有任何内容，这看起来像是因为调用了两次（“.jqclass”）.jqzoom（选项）部分。当我取第一个实例时，空白缩放窗口就消失了（虽然最初的主映像没有变焦，直到你交换图像）。是否有某种方法将OnLoad命令添加到$（“.jqCar”）？jqZoOM（选项）中；线路？因此，它只在页面第一次加载时运行，之后它将使用click函数中的行。确定，通过将第一个图像命名为jqclassorig对其进行排序。之后，每次单击缩略图都会调用jqclass，因此没有重复的calass，也没有额外的缩放框：）

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

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

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