ayano32

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!

Just as the title says...

Very useful reply, thanks!

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.

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?