0

私は小さな画像ギャラリーを作成しました。大きな画像が1つと、小さな画像がいくつかあります。大きな画像が添付されたズーマーがあり、小さな画像をクリックすると大きな画像が置き換えられますが、ズーマーは新しい画像ではなく古い画像を表示します

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 に答える