ayano32 Posted January 7, 2019 Report Share Posted January 7, 2019 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! Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.