jquery zoom with dynamic-changing image

Question

我用jquery zoom来显示tshirt的图像，并允许我的用户放大它。

最近，我添加了一个选项来选择T恤的颜色。点击颜色后，我有一个脚本可以用相应的颜色更改T恤图像。 问题是，当选择一种颜色时，缩放图像仍将使用默认图像（黑色）。

我需要找到一种方法来告诉jquery.zoom.js，如果用户点击一个颜色

您可以自己测试一下，看看这里的问题的形象已经改变： https://www.no-gods-no-masters.com/test.php 只需点击红色，然后将鼠标移动到t恤上 - 颜色仍然是黑色。在jQuery插件的

来源这里使用：https://www.ni-dieu-ni-maitre.com/scripts/jquery.zoom.js

颜色切换脚本：

$.ajax({ 
    type: "post", 
    url: "tshirt_ajax.php?checkshop=" + checkshop + "&checkproducttype=" + checkproducttype + "&stockcolor=" + stockcolor + "&currentsize=" + currentsize, 
    beforeSend: function(){ 
    $('#productColor10462727').val(stockcolor); 
    }, 
    success: function(data){ 
    $('select#size').html(data); 
    $('#tshirtimg').attr('src', 'https://www.ni-dieu-ni-maitre.com/images/16176162_' + stockcolor + '_2/t-shirt-couleur.png'); 
    $('#size').coreUISelect('update'); 
    } 
}); 

任何想法？

Answer 1

该插件将img与CSS类zoomImg附加到您调用zoom的元素上。一种选择是改变这个img的src。在您的示例页面中，将下面的代码放在success回调中。

$('#ex1 .zoomImg').attr('src', 'https://www.ni-dieu-ni-maitre.com/images/16176162_' + stockcolor + '_2/t-shirt-couleur.png'); 

但是，该解决方案取决于插件的实现。当用户选择颜色时，您可能会更换现有的img，然后在新的img上调用zoom。