jquery缩放，动态变化的图像

Question

I use jquery zoom to display the image of a tshirt and allow my users to zoom it.

Recently, i have added an option to select the color of the t-shirt. After clicking on a color, i have a script that will change the tshirt image with the corresponding color. The problem is that when a color is selected, the zoomed image will still use the default image (black color).

I need to find a way to tell jquery.zoom.js that the image has changed if the user clicked a color

You can test it yourself and see the problem here: https://www.no-gods-no-masters.com/test.php Just click on red color then move your mouse over the tshirt - the color is still black.

Source of the jquery plugin used here: https://www.ni-dieu-ni-maitre.com/scripts/jquery.zoom.js

Color-switching script:

$.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');
  }
});

Any ideas?

Answer 1

The plugin appends an img with CSS class zoomImg to the element(s) on which you call zoom. One option is to alter the src of this img. In your example page, place the following code in the success callback.

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

This solution, however, depends on the implementation of the plugin. You're probably better off replacing the existing img when the user chooses the color, then calling zoom on the new img.