We Keep Coding

Replace modal image on Click

It's been a while since I used JS and I'm getting problems creating this modal-img.
I'm following this guide.
The modal script is working as it should. If I click on the image "img_snow.jpg" it opens the modal with the same image, but what I really need is to click on the image and open the modal with a different image "img_fire.jpg", not the same one I previously clicked on.
I'm trying to replace "img_snow.jpg" with "img_fire.jpg" ONLY when the modal pops up.
Any clue about how to solve this?
<!-- Image to show on the modal -->
<img id="myImgToReplace" src="img_fire.jpg">
<!-- Trigger the Modal -->
<img id="myImg" src="img_snow.jpg" alt="Snow">
<!-- The Modal -->
<div id="myModal" 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>
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";
}

In order to get the desired result, you need to modify the event function img.onclick = function(){}.
Declare a variable to which you want to put the default image (preview):
let default_image = this.src;
For this.src you need to assign the image path for the modal window (I chose a random picture):
this.src = 'https://www.12542.ru/206-28.jpg';
And in order for the default picture to return, you need to do this
this.src = default_image;
In the end, your function should be like this:
img.onclick = function(){
let default_image = this.src;
modal.style.display = "block";
this.src = 'https://www.12542.ru/206-28.jpg';
modalImg.src = this.src;
this.src = default_image;
captionText.innerHTML = this.alt;
}
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(){
let default_image = this.src;
modal.style.display = "block";
this.src = 'https://www.12542.ru/206-28.jpg';
modalImg.src = this.src;
this.src = default_image;
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";
}
#myImg {
border-radius: 5px;
cursor: pointer;
transition: 0.3s;
}
#myImg:hover {opacity: 0.7;}
/* The Modal (background) */
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
padding-top: 100px; /* Location of the box */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
}
/* Modal Content (image) */
.modal-content {
margin: auto;
display: block;
width: 80%;
max-width: 700px;
}
/* Caption of Modal Image */
#caption {
margin: auto;
display: block;
width: 80%;
max-width: 700px;
text-align: center;
color: #ccc;
padding: 10px 0;
height: 150px;
}
/* Add Animation */
.modal-content, #caption {
-webkit-animation-name: zoom;
-webkit-animation-duration: 0.6s;
animation-name: zoom;
animation-duration: 0.6s;
}
#-webkit-keyframes zoom {
from {-webkit-transform:scale(0)}
to {-webkit-transform:scale(1)}
}
#keyframes zoom {
from {transform:scale(0)}
to {transform:scale(1)}
}
/* The Close Button */
.close {
position: absolute;
top: 15px;
right: 35px;
color: #f1f1f1;
font-size: 40px;
font-weight: bold;
transition: 0.3s;
}
.close:hover,
.close:focus {
color: #bbb;
text-decoration: none;
cursor: pointer;
}
/* 100% Image Width on Smaller Screens */
#media only screen and (max-width: 700px){
.modal-content {
width: 100%;
}
}
<img id="myImg" src="https://s1.1zoom.ru/big0/98/Slovenia_Summer_Lake_487816.jpg" alt="Snow" style="width:100%;max-width:300px">
<!-- The Modal -->
<div id="myModal" class="modal">
<span class="close">×</span>
<img class="modal-content" id="img01">
<div id="caption"></div>
</div>
second solution:
var modal = document.getElementById("myModal");
var img = document.querySelectorAll(".myImg");
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
const img_modal = ['https://static3.depositphotos.com/1000992/133/i/600/depositphotos_1337508-stock-photo-a-free-flying-white-dove.jpg',
'https://i.pinimg.com/474x/9c/a1/7e/9ca17e8e343e1ebfee9a463fc4ec22fe.jpg',
'https://everskate.com/wp-content/uploads/2017/12/how-to-kickflip-trick-tip-600x336.jpg'];
Array.from(img).forEach(function(imgArray, i) {
imgArray.onclick = function(){
let default_image = this.src;
modal.style.display = "block";
this.src = img_modal[i];
modalImg.src = this.src;
this.src = default_image;
captionText.innerHTML = this.alt;
}
});
var span = document.getElementsByClassName("close")[0];
span.onclick = function() {
modal.style.display = "none";
}
.myImg {
border-radius: 5px;
cursor: pointer;
transition: 0.3s;
}
.myImg:hover {opacity: 0.7;}
/* The Modal (background) */
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
padding-top: 100px; /* Location of the box */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
}
/* Modal Content (image) */
.modal-content {
margin: auto;
display: block;
width: 80%;
max-width: 700px;
}
/* Caption of Modal Image */
#caption {
margin: auto;
display: block;
width: 80%;
max-width: 700px;
text-align: center;
color: #ccc;
padding: 10px 0;
height: 150px;
}
/* Add Animation */
.modal-content, #caption {
-webkit-animation-name: zoom;
-webkit-animation-duration: 0.6s;
animation-name: zoom;
animation-duration: 0.6s;
}
#-webkit-keyframes zoom {
from {-webkit-transform:scale(0)}
to {-webkit-transform:scale(1)}
}
#keyframes zoom {
from {transform:scale(0)}
to {transform:scale(1)}
}
/* The Close Button */
.close {
position: absolute;
top: 15px;
right: 35px;
color: #f1f1f1;
font-size: 40px;
font-weight: bold;
transition: 0.3s;
}
.close:hover,
.close:focus {
color: #bbb;
text-decoration: none;
cursor: pointer;
}
/* 100% Image Width on Smaller Screens */
#media only screen and (max-width: 700px){
.modal-content {
width: 100%;
}
}
<img class="myImg" src="https://s1.1zoom.ru/big0/98/Slovenia_Summer_Lake_487816.jpg" alt="Snow" style="width:100%;max-width:300px">
<img class="myImg" src="https://s1.1zoom.ru/big0/235/Poppies_Summer_Grasslands_Trees_562184_1270x1024.jpg" alt="Snow" style="width:100%;max-width:300px">
<img class="myImg" src="https://akiwa.ru/upload/dev2fun_opengraph/ccf/ccf8acce0f0bdabc13d15f4f1ff6c549.jpg" alt="Snow" style="width:100%;max-width:300px">
<div id="myModal" class="modal">
<span class="close">×</span>
<img class="modal-content" id="img01">
<div id="caption"></div>
</div>

modalImg.src = document.getElementById('myImgToReplace').src;
did you tried this ?

How to enable the Image view for all looping images separately

I have code for fetching the images and if I clicked that image it's become in a images view the issue is the first image, image view only working other images, image view not working I know I have issues with my JavaScript code but I don't how to fix that please help me how to fix this and make it work.
Note:
Each Post have different images and same like different id's like
<?php echo $p_id; ?> this id will change for all images.
// 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("closeimage")[0];
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none";
}
/*--- Images Model View Box ---*/
.newsize {
width: 118%;
height: 25%;
margin-left: -45.4px;
cursor: pointer;
}
/* The Modal (background) */
.modalimage {
display: none;
/* Hidden by default */
position: fixed;
/* Stay in place */
z-index: 1;
/* Sit on top */
padding-top: 100px;
/* Location of the box */
left: 0;
top: 0;
width: 100%;
/* Full width */
height: 100%;
/* Full height */
overflow: auto;
/* Enable scroll if needed */
background-color: rgb(0, 0, 0);
/* Fallback color */
background-color: rgba(0, 0, 0, 0.9);
/* Black w/ opacity */
}
/* Modal Content (image) */
.modalimage-content {
margin: auto;
display: block;
width: 80%;
max-width: 700px;
}
/* Caption of Modal Image */
#caption {
margin: auto;
display: block;
width: 80%;
max-width: 700px;
text-align: center;
color: #ccc;
padding: 10px 0;
height: 150px;
}
/* Add Animation */
.modalimage-content,
#caption {
-webkit-animation-name: zoom;
-webkit-animation-duration: 0.6s;
animation-name: zoom;
animation-duration: 0.6s;
}
#-webkit-keyframes zoom {
from {
-webkit-transform: scale(0)
}
to {
-webkit-transform: scale(1)
}
}
#keyframes zoom {
from {
transform: scale(0)
}
to {
transform: scale(1)
}
}
/* The Close Button */
.closeimage {
position: absolute;
top: 75px;
right: 35px;
color: #f1f1f1;
font-size: 40px;
font-weight: bold;
transition: 0.3s;
}
.closeimage:hover,
.closeimage:focus {
color: #bbb;
text-decoration: none;
cursor: pointer;
}
/* 100% Image Width on Smaller Screens */
#media only screen and (max-width: 700px) {
.modalimage-content {
width: 100%;
}
}
/*--- Images Model View Box ---*/
<?php
while ($mLibary = mysqli_fetch_assoc($getMlibary)) {
extract($mLibary);
?>
<span>
<img src="<?php echo $u_pimg;?>" alt="" class="newsize" id="myImg">
</span>
<div id="myModal" class="modalimage">
<span class="closeimage">×</span>
<img class="modalimage-content" id="img01">
<div id="caption"></div>
</div>
<?php } ?>

This should do the work:
PHP (put the model outside the loop)
<?php
while ($mLibary = mysqli_fetch_assoc($getMlibary)) {
extract($mLibary);
?>
<span>
<img src="<?php echo $u_pimg;?>" alt="" class="newsize" id="myImg" onclick="showModel(event);">
</span>
<?php } ?>
<div id="myModal" class="modalimage">
<span class="closeimage">×</span>
<img class="modalimage-content" id="img01">
<div id="caption"></div>
</div>
Javascript
<script>
function showModel(ev){
var modal = document.getElementById('myModal');
// Get the image and insert it inside the modal - use its "alt" text as a caption
var img = ev.target;
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
img.onclick = function() {
modal.style.display = "block";
modalImg.src = img.src;
captionText.innerHTML = img.alt;
}
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("closeimage")[0];
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none";
}
}
}
</script>

How can I use multiple modals on my site?

Trying to figure out how to use multiple modals on my website.
I have one working fine but try to use a second triggering the same javascript action but it doesn't pop up the modal. I need a system for making multiple modals as my idea is to make each one have a popup box displaying dicord usernames.
I pasted my code below:
// Get the modal
var modal = document.getElementById('myModal');
// Get the button that opens the modal
var btn = document.getElementById("myBtn1");
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// When the user clicks on the button, open the modal
btn.onclick = function() {
modal.style.display = "block";
}
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none";
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
.modal {
display: none;
/* Hidden by default */
position: fixed;
/* Stay in place */
z-index: 1;
/* Sit on top */
left: 0;
top: 0;
width: 100%;
/* Full width */
height: 100%;
/* Full height */
overflow: auto;
/* Enable scroll if needed */
background-color: rgb(0, 0, 0);
/* Fallback color */
background-color: rgba(0, 0, 0, 0.4);
/* Black w/ opacity */
}
/* Modal Content/Box */
.modal-content {
background-color: #7289da;
margin: 15% auto;
/* 15% from the top and centered */
padding: 20px;
border: 1px solid #888;
width: 10%;
/* Could be more or less, depending on screen size */
}
/* The Close Button */
.close {
color: #aaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: black;
text-decoration: none;
cursor: pointer;
}
<li id="myBtn1"><a><i class="fa fa-"><center><img height="20px"
src="/images/icons/discord.png"></center></i></a></li>
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close">×</span>
<h3 style="color:white;font-weight:bold;">Discord</h3>
<p style="color:white;font-weight:bold;font-style: italic;">text</p>
</div>
</div>

Detail(s)
You can easily achieve this via using querySelectorAll, this will return a HTMLCollection of DOM elements. You can then use the forEach function as stated below, personally I just find this approach slightly more readable than using a traditional for loop.
PS
A HTMLCollection is not the same as an Array, if you want to ever convert your HTMLCollection to an Array, you can do so via Array.from(HTMLCollection). There are other ways to convert Array-like objects to an Array, i.e. [].slice.call(HTMLCollection), you may wish to use the later approach if you wish to support legacy browsers or just browsers that do not support Array.from.
// Self invoked function.
(function() {
// List all of the buttons.
var btns = document.querySelectorAll("ul li a");
// List all of the modals.
var modals = document.querySelectorAll(".modal");
// The on click handler.
var onClickAction = function(index) {
// Get the modal by index.
var modal = modals[index];
if (modal != null) {
modal.style.display = "block";
// Now get the span.
var closeBtn = modal.querySelector(".close");
closeBtn.onclick = function() {
modal.style.display = "none";
};
// Re-assign the window event.
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
};
};
// Loop over each button.
btns.forEach(function(btn, index) {
btn.onclick = function() {
onClickAction(index);
};
});
})();
.modal {
display: none;
/* Hidden by default */
position: fixed;
/* Stay in place */
z-index: 1;
/* Sit on top */
left: 0;
top: 0;
width: 100%;
/* Full width */
height: 100%;
/* Full height */
overflow: auto;
/* Enable scroll if needed */
background-color: rgb(0, 0, 0);
/* Fallback color */
background-color: rgba(0, 0, 0, 0.4);
/* Black w/ opacity */
}
/* Modal Content/Box */
.modal-content {
background-color: #7289da;
margin: 15% auto;
/* 15% from the top and centered */
padding: 20px;
border: 1px solid #888;
width: 10%;
/* Could be more or less, depending on screen size */
}
/* The Close Button */
.close {
color: #aaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: black;
text-decoration: none;
cursor: pointer;
}
<ul>
<li id="myBtn1">
<a>
<i class="fa fa-">
<center><img height="20px" src="/images/icons/discord.png"></center>
</i>
</a>
</li>
<li id="myBtn2">
<a>
<i class="fa fa-">
<center><img height="20px" src="/images/icons/discord.png"></center>
</i>
</a>
</li>
</ul>
<div id="myModal" class="modal">
<div class="modal-content">
<span class="close">×</span>
<h3 style="color:white;font-weight:bold;">Discord</h3>
<p style="color:white;font-weight:bold;font-style: italic;">text - 1</p>
</div>
</div>
<div id="myModal2" class="modal">
<div class="modal-content">
<span class="close">×</span>
<h3 style="color:white;font-weight:bold;">Discord</h3>
<p style="color:white;font-weight:bold;font-style: italic;">text - 2</p>
</div>
</div>

The close button on my image modals isn't working

So I managed to create an image gallery with modals. It turns out to work, however in doing so, it broke the close button and the only way to close the modal is to reload the page.
Here is the code:
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 img2 = document.getElementById('myImg2');
var img3 = document.getElementById('myImg3');
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;
}
//handle click for myImg2
img2.onclick = function(){
modal.style.display = "block";
modalImg.src = this.src;
captionText.innerHTML = this.alt;
}
//handle click for myImg3
img3.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";
}
#myImg {
border-radius: 5px;
cursor: pointer;
transition: 0.3s;
}
#myImg2 {
border-radius: 5px;
cursor: pointer;
transition: 0.3s;
}
#myImg3 {
border-radius: 5px;
cursor: pointer;
transition: 0.3s;
}
#myImg:hover {opacity: 0.7;}
#myImg2:hover {opacity: 0.7;}
#myImg3:hover {opacity: 0.7;}
/* The Modal (background) */
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
padding-top: 100px; /* Location of the box */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
}
/* Modal Content (image) */
.modal-content {
margin: auto;
display: block;
width: 80%;
max-width: 700px;
}
/* Caption of Modal Image */
#caption {
margin: auto;
display: block;
width: 80%;
max-width: 700px;
text-align: center;
color: #ccc;
padding: 10px 0;
height: 150px;
}
/* Add Animation */
.modal-content, #caption {
-webkit-animation-name: zoom;
-webkit-animation-duration: 0.6s;
animation-name: zoom;
animation-duration: 0.6s;
}
#-webkit-keyframes zoom {
from {-webkit-transform:scale(0)}
to {-webkit-transform:scale(1)}
}
#keyframes zoom {
from {transform:scale(0)}
to {transform:scale(1)}
}
/* The Close Button */
.close {
position: absolute;
top: 15px;
right: 35px;
color: #f1f1f1;
font-size: 40px;
font-weight: bold;
transition: 0.3s;
}
.close:hover,
.close:focus {
color: #bbb;
text-decoration: none;
cursor: pointer;
}
/* 100% Image Width on Smaller Screens */
#media only screen and (max-width: 700px){
.modal-content {
width: 100%;
}
}
<!-- The Modal -->
<div id="myModal" class="modal">
<span class="close">×</span>
<img class="modal-content" id="img01">
<div id="caption"></div>
</div>
<h2>Image Modal</h2>
<img id="myImg" src="butterfly.png" alt="Butterfly" width="300" height="200">
<img id="myImg2" src="thestreetthatgotmislaid.png" alt="The Street That Got Mislaid" width="300" height="200">
NOTE: Since I created new element IDs for the images, did it cause the close button to not work or was it something else?

The reason is, there is no longer an img3 element, so your code is failing before it can add the click listener to the close span
You should either remove any code that references img3, or add that element back in
You can also add the click listeners in a loop, instead of adding each one by ID. This means that you can add / remove images without needing to update the code
var modal = document.getElementById('myModal');
// Get the image and insert it inside the modal - use its "alt" text as a caption
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
var images = document.getElementsByTagName('img');
// Loop through each of the images
for (var i = 0; i < images.length; i++) {
images[i].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";
}
<!DOCTYPE html>
<html>
<head>
<style>
#myImg {
border-radius: 5px;
cursor: pointer;
transition: 0.3s;
}
#myImg2 {
border-radius: 5px;
cursor: pointer;
transition: 0.3s;
}
#myImg3 {
border-radius: 5px;
cursor: pointer;
transition: 0.3s;
}
#myImg:hover {opacity: 0.7;}
#myImg2:hover {opacity: 0.7;}
#myImg3:hover {opacity: 0.7;}
/* The Modal (background) */
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
padding-top: 100px; /* Location of the box */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
}
/* Modal Content (image) */
.modal-content {
margin: auto;
display: block;
width: 80%;
max-width: 700px;
}
/* Caption of Modal Image */
#caption {
margin: auto;
display: block;
width: 80%;
max-width: 700px;
text-align: center;
color: #ccc;
padding: 10px 0;
height: 150px;
}
/* Add Animation */
.modal-content, #caption {
-webkit-animation-name: zoom;
-webkit-animation-duration: 0.6s;
animation-name: zoom;
animation-duration: 0.6s;
}
#-webkit-keyframes zoom {
from {-webkit-transform:scale(0)}
to {-webkit-transform:scale(1)}
}
#keyframes zoom {
from {transform:scale(0)}
to {transform:scale(1)}
}
/* The Close Button */
.close {
position: absolute;
top: 15px;
right: 35px;
color: #f1f1f1;
font-size: 40px;
font-weight: bold;
transition: 0.3s;
}
.close:hover,
.close:focus {
color: #bbb;
text-decoration: none;
cursor: pointer;
}
/* 100% Image Width on Smaller Screens */
#media only screen and (max-width: 700px){
.modal-content {
width: 100%;
}
}
</style>
</head>
<body>
<!-- The Modal -->
<div id="myModal" class="modal">
<span class="close">×</span>
<img class="modal-content" id="img01">
<div id="caption"></div>
</div>
<h2>Image Modal</h2>
<img id="myImg" src="butterfly.png" alt="Butterfly" width="300" height="200">
<img id="myImg2" src="thestreetthatgotmislaid.png" alt="The Street That Got Mislaid" width="300" height="200">
</body>
</html>

The Reason is you declare element img 3 which is not carry any element.Just Remove
img3 and this work fine
Here the Solution
<!DOCTYPE html>
<html>
<head>
//add your css
</head>
<body>
<!-- The Modal -->
<div id="myModal" class="modal">
<span class="close">×</span>
<img class="modal-content" id="img01">
<div id="caption"></div>
</div>
<h2>Image Modal</h2>
<img id="myImg" src="butterfly.png" alt="Butterfly" width="300" height="200">
<img id="myImg2" src="thestreetthatgotmislaid.png" alt="The Street That Got Mislaid" width="300" height="200">
<script>
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 img2 = document.getElementById('myImg2');
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;
}
//handle click for myImg2
img2.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";
}
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
</script>
</body>
</html>

How set Modal popup multiple image

I'm try to use this from w3s to show multi images in modal popup:
// 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";
}
/* Style the Image Used to Trigger the Modal */
#myImg {
border-radius: 5px;
cursor: pointer;
transition: 0.3s;
}
#myImg:hover {opacity: 0.7;}
/* The Modal (background) */
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
padding-top: 100px; /* Location of the box */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
}
/* Modal Content (Image) */
.modal-content {
margin: auto;
display: block;
width: 80%;
max-width: 700px;
}
/* Caption of Modal Image (Image Text) - Same Width as the Image */
#caption {
margin: auto;
display: block;
width: 80%;
max-width: 700px;
text-align: center;
color: #ccc;
padding: 10px 0;
height: 150px;
}
/* Add Animation - Zoom in the Modal */
.modal-content, #caption {
-webkit-animation-name: zoom;
-webkit-animation-duration: 0.6s;
animation-name: zoom;
animation-duration: 0.6s;
}
#-webkit-keyframes zoom {
from {-webkit-transform:scale(0)}
to {-webkit-transform:scale(1)}
}
#keyframes zoom {
from {transform:scale(0)}
to {transform:scale(1)}
}
/* The Close Button */
.close {
position: absolute;
top: 15px;
right: 35px;
color: #f1f1f1;
font-size: 40px;
font-weight: bold;
transition: 0.3s;
}
.close:hover,
.close:focus {
color: #bbb;
text-decoration: none;
cursor: pointer;
}
/* 100% Image Width on Smaller Screens */
#media only screen and (max-width: 700px){
.modal-content {
width: 100%;
}
}
<!-- Trigger the Modal -->
<img id="myImg" src="img_fjords.jpg" alt="Trolltunga, Norway" width="300" height="200">
<!-- 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>
It work fine for one image.
On my site I have some pages that I need to show more image, and if I set this code for other image, the popup work only for the first and not for other images.
How set correctly html and javascript?

Best solution that I have found:
Fisrt, the HTML changes:
Ex:
Each image needs their own ID... very minor change to your html... (changes from w3school.com from that original file.
<div class="image"><img **id="myImg2"** src="images/pic02.jpg" alt="" /></div>
<div class="image"><img **id="myImg3"** src="images/pic03.jpg" alt="" /></div>
Original
<div class="image"><img **id="myImg" src="images/pic01.jpg" alt="" /></div>
Second, CSS changes:
Copy the original "#myImg" and "#myImg:hover" attributes and paste right under .... adding the orinal new (number) after. Each image needs their unique "myImg"and their unique "#myImg:hover"
Ex:
#myImg2 {
border-radius: 5px;
cursor: pointer;
transition: 0.3s;
}
#myImg3 {
border-radius: 5px;
cursor: pointer;
transition: 0.3s;
}
#myImg2:hover {opacity: 0.7;}
#myImg3:hover {opacity: 0.7;}
Original
#myImg {
border-radius: 5px;
cursor: pointer;
transition: 0.3s;
}
#myImg:hover {opacity: 0.7;}
----
Javascript changes:
Added the following:
Add the var "variables" for each image and the "click" function for each image:
---
Ex:
var img2 = document.getElementById('myImg2');
var img3 = document.getElementById('myImg3');
//handle click for myImg2
img2.onclick = function(){
modal.style.display = "block";
modalImg.src = this.src;
captionText.innerHTML = this.alt;
}
//handle click for myImg3
img3.onclick = function(){
modal.style.display = "block";
modalImg.src = this.src;
captionText.innerHTML = this.alt;
}
Orginal
<script>
// 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 img2 = document.getElementById('myImg2');
var img3 = document.getElementById('myImg3');
var captionText = document.getElementById("caption");
img.onclick = function(){
modal.style.display = "block";
modalImg.src = this.src;
captionText.innerHTML = this.alt;
}
//handle click for myImg2
img2.onclick = function(){
modal.style.display = "block";
modalImg.src = this.src;
captionText.innerHTML = this.alt;
}
//handle click for myImg3
img3.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>
Here is an example of something very easy to understand:
<!DOCTYPE html>
<html>
<head>
<style>
#myImg {
border-radius: 5px;
cursor: pointer;
transition: 0.3s;
}
#myImg2 {
border-radius: 5px;
cursor: pointer;
transition: 0.3s;
}
#myImg3 {
border-radius: 5px;
cursor: pointer;
transition: 0.3s;
}
#myImg:hover {opacity: 0.7;}
#myImg2:hover {opacity: 0.7;}
#myImg3:hover {opacity: 0.7;}
/* The Modal (background) */
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
padding-top: 100px; /* Location of the box */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
}
/* Modal Content (image) */
.modal-content {
margin: auto;
display: block;
width: 80%;
max-width: 700px;
}
/* Caption of Modal Image */
#caption {
margin: auto;
display: block;
width: 80%;
max-width: 700px;
text-align: center;
color: #ccc;
padding: 10px 0;
height: 150px;
}
/* Add Animation */
.modal-content, #caption {
-webkit-animation-name: zoom;
-webkit-animation-duration: 0.6s;
animation-name: zoom;
animation-duration: 0.6s;
}
#-webkit-keyframes zoom {
from {-webkit-transform:scale(0)}
to {-webkit-transform:scale(1)}
}
#keyframes zoom {
from {transform:scale(0)}
to {transform:scale(1)}
}
/* The Close Button */
.close {
position: absolute;
top: 15px;
right: 35px;
color: #f1f1f1;
font-size: 40px;
font-weight: bold;
transition: 0.3s;
}
.close:hover,
.close:focus {
color: #bbb;
text-decoration: none;
cursor: pointer;
}
/* 100% Image Width on Smaller Screens */
#media only screen and (max-width: 700px){
.modal-content {
width: 100%;
}
}
</style>
</head>
<body>
<h2>Image Modal</h2>
<p>Guitarfetish.com </p>
<p>Gallery ideas</p>
<img id="myImg" src="img01.jpg" alt="XGP Tele Bodies" width="600" height="200">
<!-- The Modal -->
<div id="myModal" class="modal">
<span class="close">×</span>
<img class="modal-content" id="img01">
<div id="caption"></div>
</div>
<img id="myImg2" src="img02.jpg" alt="Xaviere Guitars" width="600" height="200">
<img id="myImg3" src="img03.jpg" alt="Premium Guitar Cases" width="600" height="200">
<script>
// 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 img2 = document.getElementById('myImg2');
var img3 = document.getElementById('myImg3');
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;
}
//handle click for myImg2
img2.onclick = function(){
modal.style.display = "block";
modalImg.src = this.src;
captionText.innerHTML = this.alt;
}
//handle click for myImg3
img3.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>
</body>
</html>

This implementation will not work as you are referring to the same DOM element by ID. You can try this JSFiddle which uses magnific popup plugin to make a multiple image modal. This would be easier for you to implement as well.
Here is an example of magnific popup: https://jsfiddle.net/8f60f93t/2/

How to do this for case that you do not know how many images will be needed ...?
For example I have a CSS popup that works for my needs well, but works only for one id.
Looks like this:
<div class="imagelist">
<{if $product.img_url=="" && $otherimg_num==0}>
<div class="u-oneimage">
<img src="https://img.shop-pro.jp/s_tmpl_img/28/noimage.png">
</div>
<{else}>
<{if $product.img_url !="" }>
<div class="<{if $otherimg_num == 0}>u-oneimage<{/if}>">
<a href="#test">
<img src="<{$product.img_url}>">
</a>
</div>
<{else}>
<div class="<{if $otherimg_num == 0}>u-oneimage<{/if}>">
<img src="https://img.shop-pro.jp/s_tmpl_img/28/noimage.png">
</div>
<{ /if}>
<{section name=num loop=$otherimg}>
<{if $otherimg[num].url !="" }>
<div>
<img src="<{$otherimg[num].url}>">
</div>
<{ /if}>
<{ /section}>
<{ /if}>
</div>
<a href="#" class="lightbox" id="test">
<span><img src="<{$product.img_url}>"></span>
</a>
How this case would be sorted then ...?
Thank you to everyone, who may help.