javascript zoom domyślny obraz po zmianie obrazu wartość src - javascript, jquery, html, css, image

Wystąpił problem z moim javascriptem. Po pierwsze, jeśli kliknę obraz, obraz zostanie powiększony. Problem polega na tym, że zmiana obrazu na inny i kliknięcie powoduje powiększenie pierwszego obrazu, a nie nowego.

Mój html (kontener do wyświetlania obrazu i powiększania go)

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

Mój html (następny obraz, który chcę kliknąć i powiększyć)

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

Mój JavaScript w tagu body

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

Mój javascript w tagu head (funkcja zoom)

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

Jak to naprawić, jakieś pomysły? Dzięki.

Odpowiedzi:

brakuje id = "ex3" na następnym obrazku kliknij powiększenie html. Spróbuj czegoś takiego:

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