[Multiple Modal Image Effect !HELP!]

Hi! 
I am building a project to practice what I learned in the courses. I am using a gallery of images. My idea is that when you click on an image a
bigger or another image pops up. I got it to work on one image. But I can't make it work on multiple images. I tried adjusting the JavaScript
In multiple ways with no luck. 

HTML

    <!-- Image with pop-up #0 --> // the effect only works with this image ...
    <img id="myImg" src="img/explr-imgs/1.jpg" alt="Snow"> // image you click on

    <!-- Modal image pop-up #0 -->
    <div id="myModal" class="modal">
      <span class="close">×</span>
      <img class="modal-content" id="img01" src="img/explr-imgs/3.jpg"> // image that pops-up
      <div id="caption"></div>
    </div>


    <!-- Image with pop-up #1 --> ... it doesn't work on the second image.
    <img id="myImg" src="img/explr-imgs/2.jpg" alt="Snow"> // image you click on

    <!-- Modal image pop-up #1 -->
    <div id="myModal" class="modal">
      <span class="close">×</span>
      <img class="modal-content" id="img01" src="img/explr-imgs/4.jpg"> // image that pops-up
      <div id="caption"></div>
    </div>

JS

// Get the modal =========================================================== //
var modal = document.getElementById('myModal');

// 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("img01"); // It displays the image with this id, the problem is that it only works with this id. That is what I think.
var captionText = document.getElementById("caption");


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

If you need additional information please let me know!

[What is the difference between layout and template?]

Just as the title says...

[Using Photoshop to plan website UI?]

16 hours ago, DavidCampbell said:

With photoshop don't get too attached to the details, as once you start coding, things tend to look different. Especially once you start accounting for the way different browsers interpret your beautifully crafted design. Being pedantic about pixel perfect design will just lead you to despair. You need to think of design as fluid, it's not like graphic design for print. Not at all. 

Don't be scared of using CSS, the work flow can be very fast once you know what you're doing. Just as fast as fumbling around in photoshop or illustrator.

I'm in the camp of preferring to dive straight in with the code. UX problems i'll just sketch out with pencil and paper roughly, then go code it. I use photoshop to appease people who need to see some eye candy. But I manage expectations by stating that what you see in photoshop is not necessarily how the final implementation will look.


 

Very useful reply, thanks!

[Using Photoshop to plan website UI?]

18 hours ago, administrator said:

Hi,

Every web designer has their own preferred method of doing things. Some use Photoshop while others who are more comfortable with code, will start with some web template, and then tweak the structure and design from there. 

Thanks for the reply. I should have been more patient since the box model of CSS was my favourite part of the course, exactly what I was looking for. 

[Using Photoshop to plan website UI?]

Hi! 

I am new to the community and I've only recently started with learning web development. I am currently doing the CSS course. 
However, I couldn't notice that the process of creating an appealing web page is quite slow. That is to say, code, view, adjust, code, view, adjust, repeat. 
Has anyone thought about an alternative workflow?

I am thinking myself of planning everything in photoshop visually where I can make pedantic adjustments
to anything related to UI and general aesthetics. And so after that is done, to recreate the photoshop design with HTML and CSS and make it functional. 

Meaning that I won't be worrying about whether the size of the font looks right, or the colour of something looks okay. Everything will be planned out. 
Then it will become a matter of coding.

Has anyone thought of this or tried this? Or are there other and better alternative methods of design-planning you employ?