Click on an image to zoom in

Question

I'm still a newbie when it comes to javascript, so I don't know yet how to optimize this code.

customize.js

 // Get the modal
  var modal = document.getElementById('myModal');
  var modal2 = document.getElementById('myModal2');
  var modal3 = document.getElementById('myModal3');

  // Get the image and insert it inside the modal - use its "alt" text as a      caption
  var img = document.getElementById('myImg');
  var modalImg = document.getElementById("img1");
  var captionText = document.getElementById("caption");

  var img2 = document.getElementById('myImg2');
  var modalImg2 = document.getElementById("img2");
  var captionText2 = document.getElementById("caption2");

  var img3 = document.getElementById('myImg3');
  var modalImg3 = document.getElementById("img3");
  var captionText3 = document.getElementById("caption3");


  img.onclick = function(){
 modal.style.display = "block";
 modalImg.src = this.src;
 captionText.innerHTML = this.alt;
  }

  img2.onclick = function(){
 modal2.style.display = "block";
 modalImg2.src = this.src;
 captionText2.innerHTML = this.alt;
  }

  img3.onclick = function(){
 modal3.style.display = "block";
 modalImg3.src = this.src;
 captionText3.innerHTML = this.alt;
  }
  // Get the <span> element that closes the modal
  var span = document.getElementsByClassName("close")[0];
  var span2 = document.getElementsByClassName("close")[1];
  var span3 = document.getElementsByClassName("close")[2];
  // When the user clicks on <span> (x), close the modal
  span.onclick = function() { 
 modal.style.display = "none";
  }

  span2.onclick = function(){
 modal2.style.display = "none";
  }

  span3.onclick = function(){
 modal3.style.display = "none";
  }

And this how my html looks like

HTML

<li class="one-third animate-box" data-animate-effect="fadeIn">
    <img id="myImg" src="images/Images/gallery-1.jpg" alt="Ash Image Gallery 1" height="100%" width="100%">
</li>
<li class="one-third animate-box" data-animate-effect="fadeIn">
    <img id="myImg2" src="images/Images/gallery-2.jpg" alt="Ash Image Gallery 2" height="100%" width="100%">
</li>
<li class="one-third animate-box" data-animate-effect="fadeIn" >
    <img id="myImg3" src="images/Images/gallery-3.jpg" alt="Ash Image Gallery 3" height="100%" width="100%">
</li>

Answer 1

HTML

I noticed that you didn't put the ul or ol tag in your code, you need to put your li tags inside the a ul or ol in order to have a more semantic structure.

<ul id="my-images">
    <li>
        <img src="https://api.fnkr.net/testimg/350x200/00CED1/FFF/?text=img+placeholder" alt="Ash Image Gallery 1" >
    </li>
    <li>
        <img src="https://api.fnkr.net/testimg/350x200/00CED1/FFF/?text=img+placeholder" alt="Ash Image Gallery 2">
    </li>
    <li>
        <img src="https://api.fnkr.net/testimg/350x200/00CED1/FFF/?text=img+placeholder" alt="Ash Image Gallery 3">
    </li>
</ul>

<!-- The image zoomed in will be put inside the tag below, you should keep it in your HTML file in order to show your images -->
<div class="modal"></div>

CSS

I did some very basic styling for the modal to look more attractive in the demo.

.modal {
    display: none;
    background: #000;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: .8;
}

.modal .modal-content {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -120px;
    margin-left: -150px;
    color: #fff;
}

.modal img, .modal span {
    z-index: 10;
}

JavaScript

I put all the images inside the images variable and also put the modal element in it's own variable.

Then I looped through each image using the forEach(), defining that for each image, which the user has clicked, it will put a display: block to the modal element and insert a piece of HTML containing an <img> tag and a <span> tag with the alt property in it.

And last but not less important, everytime that the user clicks in the modal area with the display: block activated, it will put a display: none automatically on it.

var images = document.querySelectorAll('#my-images img'),
    modal = document.querySelector('.modal');

// Loops through the all the images selected...
images.forEach(function (image) {
    // When the image is clicked...
    image.addEventListener('click', function(event) {
        modal.innerHTML = '<div class="modal-content"><img src="' + event.target.src + '"><br><span>' + event.target.alt + '</span></div>';
        modal.style.display = 'block';
    });
});

// When the user clicks somewhere in the "modal" area it automatically closes itself
modal.addEventListener('click', function () {
    this.style.display = 'none';
});

I didn't bother to put any effect on the modal element, I was simply controlling the hide and show properties and didn't cared about fadeIn or fadeOut that were mentioned in your code.

The easiest and fastest way to make some animations, would be making use of some third-party animation library such as Animate.css that comes with tons of cool effects to work with.