imagem padrão de zoom javascript após alterar o valor da imagem src - javascript, jquery, html, css, imagem

Há um problema com meu javascript aqui. Primeiro, se eu clicar na imagem, ela ampliará a imagem. O problema é que quando a imagem muda para uma diferente e clica, ela ainda amplia a primeira imagem, não a nova.

Meu html (contêiner para mostrar a imagem e ampliá-la)

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

Meu html (próxima imagem, quero clicar e ampliar)

<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="/images/<?php echo "./image/product/p1/". $row["item_image"]. ".jpg"; ?>" alt="">
</a>
</div>

Meu Javascript na tag body

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

Meu javascript na tag head (função de zoom)

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

Como consertar, alguma idéia? Obrigado.

Respostas:

você está perdendo o id = "ex3" na próxima imagem, clique em zoom html. Tente algo assim:

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