동적으로 바뀌는 이미지로 jquery 확대

Question

나는 tshirt의 이미지를 표시하고 내 사용자가 확대/축소 할 수 있도록 jquery zoom을 사용합니다.

최근에 티셔츠의 색상을 선택하는 옵션이 추가되었습니다. 색상을 클릭하면 해당 색상의 tshirt 이미지가 변경되는 스크립트가 생깁니다. 문제는 색상을 선택하면 확대 된 이미지가 기본 이미지 (검정색)를 계속 사용한다는 것입니다. https://www.no-gods-no-masters.com/test.php 그냥 클릭

나는 사용자가 당신은 스스로를 테스트하고 여기에 문제를 볼 수있는 색상

을 클릭하면 이미지가 변경되었음을을 jquery.zoom.js을 말할 수있는 방법을 찾을 필요 붉은 색을 그려 마우스를 tshirt 위로 옮기십시오. 색깔은 여전히 ​​검은 색입니다. 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

플러그인은 zoom을 호출하는 요소에 CSS 클래스 zoomImg이 포함 된 img을 CSS에 추가합니다. 하나의 옵션은이 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을 호출하십시오.