0

我做了一个小图片库，里面有一张大图片和几张小图片。有一个带有大图像的缩放器，当我单击小图像时，它会替换大图像，但缩放器显示旧图像而不是新图像

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;" />

我在哪里错了或正确的方法是什么？

谢谢

4

1 回答 1

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>
于 2013-03-27T05:28:06.130 回答