我有两个 Jquery 函数 1 来显示图像的缩放 / 细节, 还有两个 缩略图显示多个图像 。 它们都有效, 直到您交换图像, 然后新的图像显示, 但是旧图像仍然在缩放功能中 。 我想我还需要更新新的缩放函数, 但我不确定如何进行 。 您如何强制重新装入或刷新此函数?
<script type="text/javascript">
jQuery(document).ready(function($){
$( #image ).addimagezoom()
magnifiersize: [300,300]
});
jQuery(document).ready(function($){
$("li.tmb-all a").click(function() {
var mainImage = $(this).attr("href"); //Find Image Name
$("#image").attr( src , mainImage);
return false;
});
})
</script>
相关 HTML :
<div id="main_image">
<img alt="available in 10 colors" id="image" itemprop="image" src="/products/440/large/custom-woven-1.jpg" width="400" />
</div>
</div>
<!-- no need for thumnails unless there is more then one image -->
<ul id="product-thumbnails" class="thumbnails" data-hook>
<li class="tmb-all" id="tmb-440"><a href="/spree/products/440/large/custom-woven-1.jpg"><img alt="Custom-woven-wristbands-1" src="/products/440/mini/custom-woven-1.jpg" /></a></li>
<li class="tmb-all" id="tmb-442"><a href="/spree/products/442/large/custom-woven-2.jpg"><img alt="Custom-woven-wristbands-2" src="/products/442/mini/custom-woven-2.jpg" /></a></li>
<li class="tmb-all" id="tmb-439"><a href="/spree/products/439/large/custom-woven-3.JPG"><img alt="Custom-woven-wristbands-3" src="/products/439/mini/custom-woven-3.JPG" /></a></li>
<li class="tmb-all" id="tmb-441"><a href="/spree/products/441/large/custom-woven-4.jpg"><img alt="Custom-woven-wristbands-4" src="/products/441/mini/custom-woven-4.jpg" /></a></li>
</ul>
</div>