javascript zoom immagine di default dopo la modifica dell'immagine valore di src - javascript, jquery, html, css, image

C'è un problema con il mio javascript qui. Innanzitutto, se faccio clic sull'immagine, ingrandirà l'immagine. Il problema è quando l'immagine cambia in una diversa e fa clic, ingrandisce ancora la prima immagine, non quella nuova.

Il mio html (contenitore per mostrare l'immagine e ingrandirla)

<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>

Il mio html (immagine successiva che voglio fare clic e ingrandire)

<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>

Il mio Javascript nel tag body

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

Il mio javascript nel tag head (funzione zoom)

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

Come risolverlo, qualche idea? Grazie.

risposte:

ti manca id = "ex3" nell'immagine successiva fai clic su zoom html. Prova qualcosa del genere:

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