ajax 更新多个图像后模型的缩放产品

Question

当产品只有一张图片时，使用 Hotcakes Commerce 模块 dotnetnuke.zoom 图片可以正常工作。用于缩放的 jQuery 库是 elevateweb.co。 (Added Zoom to product view with this tutorial) product.js 中的代码也已更新

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

data-zoom-image 图片来源的属性更新正确，但在更改产品型号后缩放显示以前的图片。更改图像的 data-zoom-image 属性后 elevateZoom 函数已被调用以更新缩放。但没有变化。

Answer 1

我不熟悉 Hotcakes Commerce。但是我认为你必须重新绑定缩放后的背景图像DIV。

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

这可能最适用于相同尺寸的图片。

ajax 更新多个图像后模型的缩放产品

Zoom Product for models after ajax update for MULTIPLE IMAGES

javascript

ajax

jquery

dotnetnuke

e-commerce