Calling Javascript function at the wrong time

Question

Good evening, I’m trying to create a page that displays an image in a fashionlBox with the zoom function, but I’m facing the problem that even clicking outside the image thumbnail, the zoom function is running, anyone would know how to solve? The code is below:

<span class='zoom' id='ex3'>
   <img id="myImg" src="http://t.wallpaperweb.org/wallpaper/nature/1920x1200/Trolltunga_Odda_Norway.jpg" alt="Trolltunga, Norway" width="300" height="200">
   <p>Hover</p>
</span>


<div id="myModal" class="modal">
  <span class="close">&times;</span>
  <div class="zoom">
    <img class="modal-content" id="img01" width=300 height=300>
  </div>


  <div id="caption"></div>
</div>

$(function(){
var modal = document.getElementById('myModal');
var img = document.getElementById('myImg');
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");

img.onclick = function() {
    modal.style.display = "block";
    modalImg.src = this.src;
    captionText.innerHTML = this.alt;
    $('.zoom').zoom({
      on: 'click',
      url: this.src
    });
  }
  // Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
  modal.style.display = "none";
 }
})

Answer 1

You have bootstrap classes in the wrong order; modal-content is what encompasses the content of the modal, while zoom is what is encompassed by modal-content and encompasses the image.

You also have a class in img which gives you the power of modal-content, which is not certain.

change the html of the modal content to

  <div class="modal-content">
    <div class="zoom">
      <img id="img01" class="pre-zoom">
    </div>
  </div>

and adds the CSS:

.pre-zoom {
  margin:0 auto;
  width: 100%;
  max-width: 700px;
}