We Keep Coding

Problem with pure JavaScript Modal images

I have a problem with modal popup images. I have a list of images and tried to use this code (with some changes): https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_modal_img But it works only for the first message. How can I make it work for all messages from the gallery?
<div>
<div class="portfolio-overlay">
<img src="img/portfolio/Transeco-small.jpg">
<div class="portfolio-image-overlay image-overlay-content">
<div class="portfolio-icons">
<i class="icon-zoom-in open-big"><img src="img/portfolio/Transeco-big.jpg" class="img-closed"></i>
<i class="icon-link"></i>
</div>
</div>
</div>
</div>
<div>
<div class="portfolio-overlay">
<img src="img/portfolio/Transeco-small.jpg">
<div class="portfolio-image-overlay image-overlay-content">
<div class="portfolio-icons">
<i class="icon-zoom-in open-big"><img src="img/portfolio/Transeco-big.jpg" class="img-closed"></i>
<i class="icon-link"></i>
</div>
</div>
</div>
</div>
<div>
<div class="portfolio-overlay">
<img src="img/portfolio/Transeco-small.jpg">
<div class="portfolio-image-overlay image-overlay-content">
<div class="portfolio-icons">
<i class="icon-zoom-in open-big"><img src="img/portfolio/Transeco-big.jpg" class="img-closed"></i>
<i class="icon-link"></i>
</div>
</div>
</div>
</div>
<!-- The Modal -->
<div class="modal myModal">
<span class="close">×</span>
<img class="modal-content img01">
</div>
// Get the modal
var modal = document.querySelector(".myModal");
// Get the image and insert it inside the modal - use its "alt" text as a caption
var img = document.querySelector('.open-big');
var modalImg = document.querySelector(".img01");
var probaa = document.querySelector('.open-big img');
img.onclick = function(){
modal.style.display = "block";
modalImg.src = probaa.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";
}
There are no errors in console, but it works only on firs image...

var img = document.querySelector('.open-big');
document.querySelector only selects a single element, in this case the first element with the class open-big
in order to select all elements you must use document.querySelectorAll
then you can iterate over that set an add event listeners to each one:
var imgs = document.querySelectorAll('.open-big');
for (i = 0; i < imgs.length; ++i) {
imgs[i].onclick = function(){
modal.style.display = "block";
modalImg.src = probaa.src;
}
}
you CANNOT use normal array methods on a node collection though. so, imgs.forEach will not work. There is a somewhere complicated workaround though:
[].forEach.call(imgs, function(img) {
// do whatever
});
There is more information at this link on css tricks.

Select Multiple Elements for Image Modal

I want to use a selector to select every image on the page for putting into the modal without rewriting the entire script for each image. I feel like this a is a dumb question but I keep striking out trying different things. Right now I'm using var img = document.getElementById("article01"); to select one image because that's all you can do with getElementById. So I want to select both the images listed so that I'm not rewriting the entire script for each image because there will be many more on the page. I tried using getelementbyclass and tagname but I think I'm stuck.
HTML:
<!-- Trigger the Modal -->
<img id="article01" src="/images/article1.PNG" alt="" style="width:100%;max-width:300px">
<img id="article01-2" src="/images/article1-2.PNG" alt="" style="width:100%;max-width:300px">
<!-- The Modal -->
<div id="modal1" class="modal">
<!-- The Close Button -->
<span class="close">×</span>
<!-- Modal Content (The Image) -->
<img class="modal-content" id="img01">
<!-- Modal Caption (Image Text) -->
<div id="caption"></div>
</div>
Javascript:
<script>
// Get the modal
var modal = document.getElementById("modal1");
*var img = document.getElementById("article01");*
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;
}
// 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";
}
</script>

You can use document.querySelectorAll() to get a nodeList of all of the images. For example, if you created your list of images as such:
<img class="selectable" src="article-1" />
<img class="selectable" src="article-2" />
<img class="selectable" src="article-2" />
You can add an event listener to each using ...
document.querySelectorAll('img.selectable')
.forEach((img) => {
img.addEventListener('click', (e) => showModal(e.target)); //or use img.onclick = ...
});
Here is a link to a CodePen showing a demo of how to do this...

Here's what i got from your post. I think what you are looking for is document.querySelector()
<!-- Trigger the Modal -->
<img alt="this is a caption" src="https://livebrooks.com/wp-content/uploads/2017/07/fpo.gif" style="width:100%;max-width:300px">
<img alt="this is the second caption" src="https://livebrooks.com/wp-content/uploads/2017/07/fpo.gif" style="width:100%;max-width:300px">
<!-- The Modal -->
<div id="modalWrap" class="modal">
<!-- The Close Button -->
<span class="close" onclick="document.querySelector('#modalWrap').remove()">×</span>
</div>
for (var i of document.querySelectorAll("img")) {
makeModal(i.src, i.getAttribute("alt"));
}
function makeModal(src, caption) {
//modal wrap
var modalWrap = document.querySelector("#modalWrap");
//img
var imgElement = document.createElement("img");
imgElement.src = src;
imgElement.style.maxWidth = "300px";
//caption
var captionElement = document.createElement("p");
captionElement.innerText = caption;
//adding elements to modalWrap
modalWrap.appendChild(imgElement);
modalWrap.appendChild(captionElement);
}

Make JavaScript onclick function open modal with image and caption

I currently have it so that onClick the modal opens ,but it does not display the image..
Here's the code
HTML
<div class="item">
<img src="Imgs/10.jpg" alt="Hello welcome to the picture thingy" onclick="showImage('Imgs/10.jpg');" style="width:100%;" id="myImg" />
<p class="xtratekst">
othertext
</p></div><div id="myModal" class="modal">
<!-- The Close Button -->
<span class="close" onclick="document.getElementById('myModal').style.display='none'">×</span>
!-- Modal Content (The Image) -->
<img class="modal-content" id="image">
<!-- Modal Caption (Image Text) -->
<div id="caption"></div>
</div>
JavaScript
// 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("image");
var captionText = document.getElementById("caption");
function showImage(){
modal.style.display = "block";
modalImg.src = this.src;
captionText.innerHTML = this.alt;
}
// 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";
}

You showImage function should take a parameter:
function showImage(image){
Then set the modal image src to that parameter:
modalImg.src = image

Modal for multiple images:

I looked around at the answers on such questions and couldn't understand anything. Deeply appreciated if you can help:
I have some pictures on a website. I want the modal to work such that when a picture is clicked it appears in a larger size.
The Problem: The code only works for the first image. When I click in the second image, nothing happens. I HAVE looked around and seen some answers pointing out that having the same id for different images is the problem but I couldn't understand how to fix this issue.
The Other Problem: I have JS code for a slide show and JS code for the modal. However, if the code for the modal comes in first, the code for the slideshow doesnt work, and vice-versa
I copied the code from W3Schools:
HTML HERE
<!-- Trigger the Modal -->
<img id="myImg" src="assets/img/work/amigurumi/cerdo/main.JPG" alt="Cerdito" width="360">
<!-- The Modal -->
<div id="myModal" class="modal">
<!-- The Close Button -->
<span class="close" onclick="document.getElementById('myModal').style.display='none'">×</span>
<!-- Modal Content (The Image) -->
<img class="modal-content" id="img01">
<!-- Modal Caption (Image Text) -->
<div id="caption"></div>
</div>
<p>Cerdito 1</p>
</div>
<div class="col-lg-4">
<!-- Trigger the Modal -->
<img id="myImg" src="assets/img/work/amigurumi/cerdo/P1140064.JPG" alt="Problema con imagen" width="360">
<!-- The Modal -->
<div id="myModal" class="modal">
<!-- The Close Button -->
<span class="close" onclick="document.getElementById('myModal').style.display='none'">×</span>
<!-- Modal Content (The Image) -->
<img class="modal-content" id="img01">
<!-- Modal Caption (Image Text) -->
<div id="caption"></div>
</div>
<p>Cerdito 2</p>
</div>
JS HERE - Note I've put down the JS code for the modal and for a slideshow because I'm having a connected problem. JS only works for the code which appears first (so if the slide show code is after the modal code, slide show doesnt work...)
// IMAGE MODAL DAVID 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");
var captionText = document.getElementById("caption");
img.onclick = function(){
modal.style.display = "block";
modalImg.src = this.src;
captionText.innerHTML = this.alt;
}
// 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";
}
//Slideshow DAVID
var slideIndex = 0;
carousel();
function carousel() {
var i;
var x = document.getElementsByClassName("mySlides");
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
slideIndex++;
if (slideIndex > x.length) {slideIndex = 1}
x[slideIndex-1].style.display = "block";
setTimeout(carousel, 2000); // Change image every 2 seconds
}

In the name of your modal question you must like this solution, I imagine. I posted an answer here to a similar question few days ago. Go to :
Add next and previous buttons when the I open the modal
Good luck

second modal button doesn't work

My second, third and so on buttons which open modal, doesn't work and I can't figure out the problem.
I think is a logic problem in my javascript code for sure, but I can't find a way to solve it ... maybe you can help me.
var modal = document.getElementById('myModal');
// Get the image and insert it inside the modal
var img = document.getElementById('myImg');
var modalImg = document.getElementById('img01');
var buton = document.getElementById('continut');
buton.onclick = function() {
modal.style.display = "block";
modalImg.src = img.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";
}
You have a demonstration on jsfiddle
Thanks in advance !
https://jsfiddle.net/qschptk9/1/
I've got 2 negative votes, and NO ONE Helped me.
Ok i've Changed the ID's, but still doesn't work, because getElementsByClassName return an array of elements ...

id should be unique so you should't use it for 2 elements
you use the same id 2 times for many elemets (button, modal, img, modalimg)
you can change the id's for all those elements (hard coded option), or you can add a class for both and add click event for both but you will need to differentiate each modal and each img (you can do this by passing ids for these elements in a function)
Edit
this is an optimized solution that i would use for you want to do
I added only one modal and used onclick event for each button to pass the header text and the img id to a function that show the appropriate modal
here is the HTML
<div class="portfolio_content">
<div class="row" id="portfolio">
<div class="col-xs-12 col-sm-4 websites responsive webDesign">
<div class="portfolio_single_content">
<img id="myImg1" src="http://www.w3schools.com/css/img_fjords.jpg" alt="title" />
<div>
<!--Continut because from here we access the content of this preview photo-->
<div class="continut">
<p>Portfolio Website</p>
<button class="seeBtn" onclick="showModal('Portfolio Website','myImg1')">
button
</button>
</div>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-4 appsDevelopment">
<div class="portfolio_single_content">
<img id="myImg2" src="http://www.w3schools.com/css/img_fjords.jpg" alt="title" />
<div>
<!--Continut because from here we access the content of this preview photo-->
<div class="continut">
<p>Pomodoro Clock</p>
<button class="seeBtn" onclick="showModal('Pomodoro Clock','myImg2')">
button
</button>
</div>
</div>
</div>
</div>
</div>
</div>
<!--The modal-->
<div class="modal" id="myModal">
<!-- Modal content -->
<div class="modal-content">
<!--Modal header-->
<div class="modal-header">
<span class="close" id="close">CLOSE X<i class="fa fa-times" aria-hidden="true"></i></span>
<h2 id="modal_h1"></h2>
</div>
<div class="modal-body">
<img class="modal-image" id="img01">
</div>
<div class="modal-footer">
<h3>External link</h3>
</div>
</div>
</div>
and here is the js code
var modal = document.getElementById('myModal');
var modalImg = document.getElementById('img01');
var modalHeaderTxt = document.getElementById('modal_h1');
function showModal(header_txt,img_id){
// Get the image and insert it inside the modal
var img = document.getElementById(img_id);
modalImg.src = img.src;
modalHeaderTxt.innerHTML = header_txt;
modal.style.display = "block";
}
// Get the <span> element that closes the modal
var span = document.getElementById("close");
//When the user clicks on <span> (X), close the modal
span.onclick = function() {
modal.style.display = "none";
}
Demo
and here is the hard coded option (i don't recommend it)
var modal = document.getElementById('myModal');
var modal2 = document.getElementById('myModal2');
// Get the image and insert it inside the modal
var img = document.getElementById('myImg');
var img2 = document.getElementById('myImg');
var modalImg = document.getElementById('img01');
var modalImg2 = document.getElementById('img02');
var buton = document.getElementById('continut');
var buton2 = document.getElementById('continut2');
buton.onclick = function() {
modal.style.display = "block";
modalImg.src = img.src;
}
buton2.onclick = function() {
modal2.style.display = "block";
modalImg2.src = img2.src;
}
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
var span2 = document.getElementsByClassName("close")[1];
//When the user clicks on <span> (X), close the modal
span.onclick = function() {
modal.style.display = "none";
}
span2.onclick = function() {
modal2.style.display = "none";
}
Demo

You have two id's with same name hence first id will be picked everytime. The ids must be unique. Please try changing the id and it should work.
Or you can try to change it into class names and then work with classes

You need to change the id's for the models to classes. You can't assign multiple id's in HTML. That's why your code works only for one modal.
Change your id's to classes like this:
<div class="modal myModal">

i think you have more than one element that has id='myModal'
, in that case you should do:
var modal = document.getElementById('myModal')[correct element number]
example :
document.getElementById('myModal')[0] //for the first element
document.getElementById('myModal')[1] //for the second element
and so on...
for each button