Я использую jquery zoom
для отображения изображения tshirt и позволяю моим пользователям увеличивать масштаб изображения.
Недавно я добавил вариант выбора цвета футболки. После нажатия на цвет у меня есть скрипт, который изменит изображение tshirt с соответствующим цветом. Проблема заключается в том, что когда выбран цвет, увеличенное изображение по-прежнему будет использовать изображение по умолчанию (черный цвет).
Мне нужно найти способ сообщить jquery.zoom.js, что изображение изменилось, если пользователь нажал на цвет
Вы можете проверить его самостоятельно и увидеть проблему здесь: https://www.no-gods-no-masters.com/test.php Просто нажмите на красный цвет, затем наведите указатель мыши на футболку - цвет по-прежнему черный.
Источник плагина 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 + "¤tsize=" + 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');
}
});
Есть идеи?
Плагин добавляет img
с классом CSS zoomImg
к элементу (элементам), на который вы вызываете zoom
. Один из вариантов - изменить src этого img
. На странице примера разместите следующий код в success
вызове.
$('#ex1 .zoomImg').attr('src', 'https://www.ni-dieu-ni-maitre.com/images/16176162_' + stockcolor + '_2/t-shirt-couleur.png');
Это решение, однако, зависит от реализации плагина. Вероятно, вам лучше заменить существующий img
когда пользователь выбирает цвет, а затем вызывает zoom
на новом img
.