Question

我制作了一个小图像库，其中包含一张大图像以及几张小图片。有一个带有大图像的变焦镜头，当我点击小图像时，它会替换大图像，但是缩放器会显示旧图像而不是新图像

的jQuery

jQuery(document).ready(function($){ //fire on DOM ready
            $('#myimage').addpowerzoom()
            })

的javascript

function movImg(img){
    var bImg = document.getElementById('myimage');
    bImg.src=img.src;
$(document).trigger("ready");
}

HTML

<img id="myimage" src="img/abc.jpg"  alt="" />
<image src="thumbnails/xyz.jpg" onClick="movImg(this);" width="73px" style="cursor:  pointer;" />

我错了或者做对的方法是什么？

由于

Answer 1

~~尝试拨打$('#myimage').addpowerzoom();而不是$(document).trigger("ready");~~

这对我有用。看起来像更改图像源时发生的轻微延迟会打破powerzoom。想法是在加载图像后调用addpowerzoom() 。

<!DOCTYPE html> <html lang="en-AU"> <head> <meta charset="utf-8" /> <script type="text/javascript" src="js/jquery-1.8.2.js"></script> <script type="text/javascript" src="ddpowerzoomer.js"></script> <script type="text/javascript"> function movImg(img){ var bImg = document.getElementById('myimage'); bImg.src = img.src; jQuery('#myimage').one("load", function() { jQuery('#myimage').addpowerzoom(); }); }; jQuery(document).ready(function($){ $('#myimage').addpowerzoom(); }); </script> </head> <body> <img id="myimage" src="img/abc.jpg" alt="" /> <img id="thumb" src="thumbnails/xyz.jpg" onClick="movImg(this);" width="64px" style="cursor: pointer;" /> </body> </html>

jquery zoomer通过javascript更改图像源后重新绑定

1 个答案: