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>

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.

Multiple contents based in same design modal

.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.4);
/* Black w/ opacity */
font-size: 14px;
}
/* Modal Content */
.modal-content {
position: relative;
background-color: black;
color: white;
margin: auto;
padding: 0;
border: 1px solid red;
width: 80%;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
-webkit-animation-name: animatetop;
-webkit-animation-duration: 0.4s;
animation-name: animatetop;
animation-duration: 0.4s
}
/* Add Animation */
#-webkit-keyframes animatetop {
from {
top: -300px;
opacity: 0
}
to {
top: 0;
opacity: 1
}
}
#keyframes animatetop {
from {
top: -300px;
opacity: 0
}
to {
top: 0;
opacity: 1
}
}
/* The Close Button */
.close {
color: white;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: red;
text-decoration: none;
cursor: pointer;
}
.modal-header {
padding: 2px 16px;
background-color: black;
color: white;
}
.modal-body {
padding: 2px 16px;
}
.album {
position: relative;
}
<html>
<head>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
</head>
<body>
<div class="album">
<img src="seventhalbum.jpg" alt="First Album" style="width:300;height300;">
<p></p>
<!-- Trigger/Open The Modal -->
<button id="myBtn">Californication</button>
<!-- The Modal -->
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<div class="modal-header">
<span class="close">X</span>
<h2>Californication</h2>
</div>
<div class="modal-body">
<p>1: Around the World</p>
<p>2: Parallel Universe</p>
<p>3: Scar Tissue</p>
<p>4: Otherside</p>
<p>5: Get on Top</p>
<p>6: Californication</p>
<p>7: Easily</p>
<p>8: Porcelain</p>
<p>9: Emit Remmus</p>
<p>10: I Like Dirt</p>
<p>11: This Velvet Glove</p>
<p>12: Savior</p>
<p>13: Purple Stain</p>
<p>14: Right on Time</p>
<p>15: Road Trippin'</p>
</div>
</div>
</div>
<p></p>
</div>
<div class="album">
<img src="eigthalbum.jpg" alt="First Album" style="width:300;height300;">
<p></p>
<!-- Trigger/Open The Modal -->
<button id="myBtn1">By the Way</button>
<!-- The Modal -->
<div id="myModal1" class="modal">
<!-- Modal content -->
<div class="modal-content">
<div class="modal-header">
<span class="close1">X</span>
<h2>By the Way</h2>
</div>
<div class="modal-body">
<p>1: By the Way</p>
<p>2: Universally Speaking</p>
<p>3: This Is the Place</p>
<p>4: Dosed</p>
<p>5: Don't Forget Me</p>
<p>6: The Zephyr Song</p>
<p>7: Can't Stop</p>
<p>8: I Could Die for You</p>
<p>9: Midnight</p>
<p>10: Through Away Your Television</p>
<p>11: Cabron</p>
<p>12: Tear</p>
<p>13: On Mercury</p>
<p>14: Minor Thing</p>
<p>15: Warm Tape</p>
<p>16: Venice Queen</p>
</div>
</div>
</div>
<script>
// Get the modal
var modal = document.getElementById('myModal');
// Get the button that opens the modal
var btn = document.getElementById("myBtn");
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// When the user clicks 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";
}
}
</script>
<script>
// Get the modal
var modal = document.getElementById('myModal1');
// Get the button that opens the modal
var btn = document.getElementById("myBtn1");
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close1")[0];
// When the user clicks 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";
}
}
</script>
</body>
</html>
Im trying to have my page to where there are Multiple buttons that open up different Modal contents, but using the same script and css design. Im having an issue where it oly opens up one certain example. (By the Way album only displaying) how can I fix this issue, labeling the divs different did not work, atleast not for me. The two buttons in my snippet show the issue.

Change the var's in the second modal in the javascript that is different from the other.
See fiddle: https://jsfiddle.net/DIRTY_SMITH/7oe5kh9L/10/
// Get the modal
var modal1 = document.getElementById('myModal1');
// Get the button that opens the modal
var btn1 = document.getElementById("myBtn1");
// Get the <span> element that closes the modal
var span1 = document.getElementsByClassName("close1")[0];
// When the user clicks the button, open the modal
btn1.onclick = function() {
modal1.style.display = "block";
}
// When the user clicks on <span> (X), close the modal
span1.onclick = function() {
modal1.style.display = "none";
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal1) {
modal1.style.display = "none";
}
}