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

该插件会将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，然后在新的zoom上调用img。

jquery缩放，动态变化的图像

1 个答案: