2016-08-18 13 views
1

製品に画像が1つ含まれている場合、dotnetnuke.zoom画像用のHotcakes Commerceモジュールを使用する。ズームに使用するjQueryライブラリはelevateweb.coです。 product.jsコードで(Added Zoom to product view with this tutorial)は、製品の変更のモデル後拡大画像複数画像の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が、ズーム表示前の画像を更新しました。変更後data-zoom-image画像の属性elevateZoomが更新されました。変更はありません。

答えて

2

私はHotcakes Commerceに精通していません。しかし、私はあなたがズームされたDIVの背景イメージを再バインドする必要があると思います。

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

これはおそらく同じサイズの画像で最適です。

+0

は魅力的ですが、 'source'と' data-zoom-image'を変更した後に 'elevateZoom'関数を呼び出すと、なぜCSSのバックグラウンドを構築できないのですか? – Moslem7026

+1

私は分かりません。それも私が試した最初のことでした。 'elevateZoom'をもう一度呼び出すと、それは余分なzoom-divを追加していたようです。現在のものを置き換えません。その後、まだ古い画像の最初の画像しか表示されませんでした。 – VDWWD

+0

うーん。ありがとう! –