javascript - 具有动态变化图像的 jquery 缩放

Question

我使用 jquery zoom 来显示 T 恤的图像并允许我的用户缩放它。

最近，我添加了一个选项来选择 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

该插件将带有 CSS 类 zoomImg 的 img 附加到您调用 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。