확대/축소 다중 이미지 용 Ajax 업데이트 후 모델 용 제품

제품에 이미지가 하나있을 때 dotnetnuke.zoom 이미지에 Hotcakes Commerce 모듈을 올바르게 사용합니다. 확대/축소에 사용되는 jQuery 라이브러리는 elevateweb.co입니다. (Added Zoom to product view with this tutorial) product.js에서 코드를 올바르게 업데이트 된 이미지 소스의확대/축소 다중 이미지 용 Ajax 업데이트 후 모델 용 제품

$('#hcProductImage').attr('src', data.MediumImageUrl); 
$('#hcProductImage').attr('data-zoom-image', data.MediumImageUrl); 
$('#hcProductImage').elevateZoom({easing : true}); 
$('#hcSku').html(data.Sku);

data-zoom-image ATTRIB 또한 업데이트되었지만 제품의 변경 모델 후 줌 쇼 이전 이미지. 변경 후 이미지 elevateZoom의 data-zoom-image 속성이 줌을 업데이트하기 위해 호출되었습니다. 그러나 변화는 없습니다.

출처

2016-08-18 Moslem7026

저는 Hotcakes Commerce에 익숙하지 않습니다. 하지만 확대 된 DIV의 배경 이미지를 다시 바인딩해야한다고 생각합니다.

$('.zoomWindowContainer .zoomWindow').css({ 'background-image': 'url(\'' + data.MediumImageUrl + '\')' });

이것은 동일한 크기의 이미지에서 가장 잘 작동합니다.

출처

2016-08-19 14:44:31 VDWWD

은 매력처럼 작동하지만 'source' 및'data-zoom-image'를 변경 한 후에'elevateZoom' 함수를 호출하면 왜 CSS의 배경을 빌드하지 않습니까? – Moslem7026

잘 모르겠습니다. 그게 제가 시도한 첫 번째 것입니다. 그것은'elevateZoom'을 다시 호출 할 때 여분의 zoom-div를 추가하는 것과 같습니다. 현재의 것을 대체하지 않습니다. 그 다음에는 여전히 오래된 이미지가있는 첫 번째 이미지 만 보여주었습니다. – VDWWD

멋지게 완성되었습니다. 감사! –

확대/축소 다중 이미지 용 Ajax 업데이트 후 모델 용 제품

답변

관련 문제