javascriptズームデフォルトの画像変更後の画像src値

Question

ここに私のjavascriptに問題があります。まず、画像をクリックすると画像がズームされます。問題は、画像が異なるものに変わってクリックすると、新しい画像ではなく最初の画像がズームされてしまうことです。

マイHTML

<div class="col-sm-3 col-xs-6"> 
    <a href="#"> 
     <img class="img-responsive portfolio-item subimage" onclick="changeImage1(); <?php $show1="./image/product/p1/". $row['item_image']. ".jpg"; ?>" src="<?php echo "./image/product/p1/". $row['item_image']. ".jpg"; ?>" alt=""> 
    </a> 
</div> 

私のJavascriptのbodyタグに（私はをクリックしてズームしたい次の画像）

<div class="col-md-8"> 
    <span id='ex3' class="zoom"> 
     <img class="img-responsive" id="myImage" width='750' height='550' src="<?php echo "./image/product/p1/". $row['item_image']. ".jpg"; ?>"> 
    </span> 
</div> 

私のhtmlを（コンテナは、画像を表示し、それをズームする）

function changeImage1() { 
    var image = document.getElementById('myImage'); 
    var submage = document.getElementsByClassName('subimage')[1].src; 
    image.src= submage;   
} 

私の頭のタグのJavaScript（ズーム機能）

jQuery(document).ready(function($){ 
    $('#ex3').zoom({ on:'click' });   
}); 

問題を解決するにはどうすればよいですか？ありがとう。

Answer 1

あなたは次の画像にid = "ex3"がありません。ズームhtmlをクリックします。 次のように試してみてください：

jQuery(document).ready(function($){ 
     $('img').zoom({ on:'click' });   
    });