Develop Reference

Trying to have JavaScript make images bigger when clicked, only works for first image

I am trying to make a gallery where you can click on each image to make bigger. Eventually I will stylize the gallery but for now I am just trying to get the images to work. I copied this code from another user on Stack Overflow answering a question similar to mine, but I can't seem to make the JS work for more than just the first image.
#myImg:hover {
opacity: 0.7;
}
.modal {
display: none;
position: fixed;
z-index: 1;
padding-top: 100px;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgb(0, 0, 0);
background-color: rgba(255, 148, 195, 0.9);
}
.modal-content {
margin: auto;
display: block;
width: 80%;
max-width: 700px;
}
#caption {
margin: auto;
display: block;
width: 80%;
max-width: 700px;
text-align: center;
color: #ccc;
padding: 10px 0;
height: 150px;
}
.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.1);
}
to {
transform: scale(1);
}
}
.close {
position: absolute;
top: 15px;
right: 35px;
color: #f1f1f1;
font-size: 40px;
font-weight: bold;
transition: 0.3s;
}
<img id="myImg" style="width: 200px; height: 184px;" src="ta-cards.svg" alt="Business Card Design">
<div id="myModal" class="modal">
<span class="close">×</span>
<img src="ta-cards.svg" class="modal-content" id="img01">
<div id="caption"></div>
</div>
<img id="myImg" style="width: 200px; height: 184px;" src="talogos.svg" alt="Image_wallpaper">
<div id="myModal" class="modal">
<span class="close">×</span>
<img src="talogos.svg" class="modal-content" id="img01">
<div id="caption"></div>
</div>
window.onload = function() {
var modal = document.getElementById('myModal');
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;
}
var span = document.getElementsByClassName("close")[0];
span.onclick = function() {
modal.style.display = "none";
}
}
What am I doing wrong??

IDs must be unique and can't be duplicated.
Change: id="myImg" to class="myImg"
Change: #myImg:hover to .myImg:hover
New javascript, loops through the images
window.onload = function() {
var modal = document.getElementById('myModal');
var imgs = document.querySelectorAll('.myImg');
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
imgs.forEach(function(img){
img.onclick = function() {
modal.style.display = "block";
modalImg.src = this.src;
captionText.innerHTML = this.alt;
}
});
var span = document.getElementsByClassName("close")[0];
span.onclick = function() {
modal.style.display = "none";
}
}

Where you have
img.onclick = function() {
modal.style.display = "block";
modalImg.src = this.src;
captionText.innerHTML = this.alt;
}
You need to add all images now, so
var fullSizeFunc = function(e) {
model.style.display = "block";
modalImg.src = this.src;
captionText.innerHTML = this.alt;
}
document.querySelectorAll("IMG").forEach(function(i, val) {
this.addEventListener("click", fullSizeFunc);
});

attribute ID is unique for each of element. And document.getElementById will select only first element that exist in the document.
var lightboxes = document.querySelectorAll('.lightbox');
function lightboxModal(e) {
const src = e.target.getAttribute('src');
//do your modal here
}
lightboxes.forEach((el) => {
el.addEventListener('click', lightboxModal);
});
<img src="https://randomwordgenerator.com/img/picture-generator/53e2d0464f5baf14f1dc8460962e33791c3ad6e04e507440742a7ad59f49c3_640.jpg" class="lightbox" />
<img src="https://picsum.photos/536/354" class="lightbox" />

Multiple modals won't close if number of modal is unknown

I am trying to get the below code to work but it only seems to work for the last modal in the list.
var modals = document.getElementsByClassName('modal');
var btns = document.getElementsByClassName("pop-up");
var spans=document.getElementsByClassName("close-modal");
for(let i=0;i<btns.length;i++){
btns[i].onclick = function() {
modals[i].style.display = "block";
}
}
for(let i=0;i<spans.length;i++){
spans[i].onclick = function() {
modals[i].style.display = "none";
}
}
}
// When the user clicks anywhere outside of the modal, close it
for(let i=0;i<modals.length;i++){
window.onclick = function(event) {
if (event.target == modals[i]) {
modals[i].style.display = "none";
}
}
}
}
Can someone help clear up where I am going wrong?
EDIT: Below is a snippet using the event listening described in an answer below - this snippet shows that implementing this event listener prevents the button from working on click - am I implementing it incorrectly? If I remove the code in JS to do with clicking anywhere then the rest works.
function submitBtn(){
// Get the modal
var modals = document.getElementsByClassName('modal');
// Get the button that opens the modal
var btns = document.getElementsByClassName("pop-up");
var spans=document.getElementsByClassName("close-modal");
for(let i=0;i<btns.length;i++){
btns[i].onclick = function(){
modals[i].style.display = "block";
}
}
for(let i=0;i<spans.length;i++){
spans[i].onclick = function(){
modals[i].style.display = "none";
}
}
// When the user clicks anywhere outside of the modal, close it
window.addEventListener('click', function(){
var modals = document.getElementsByClassName('modal');
for(let i = 0; i < modals.length; i++){
modals[i].style.display = "none";
}
});
}
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 10; /* 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 */
}
.modal-content {
background-color: #fefefe;
margin: auto;
padding: 20px;
border: 1px solid #888;
width: 80%;
display: table;
}
/* Modal Content */
.modal-content div {
padding: 5px;
margin: 5px;
}
/* The Close Button */
.close-modal {
color: #aaaaaa;
text-align: right;
font-size: 28px;
font-weight: bold;
}
.close-modal:hover,
.close-modal:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
<div class="modal">
<div class="modal-content">
stuff1<p class="close-modal">×</p>
</div>
</div>
<div class="modal">
<div class="modal-content">stuff2<p class="close-modal">×</p></div>
</div>
<span>
<button type="button" class="pop-up" onclick="submitBtn()">SEND</button></span>
<span>
<button type="button" class="pop-up" onclick="submitBtn()">SEND</button></span>

The below is what you are looking for. As mentioned, you are overwriting the event that you've bound to window by looping through and recreating it, but the event only needs to be registered once, as demonstrated below.
window.addEventListener('click', function() {
var modals = document.getElementsByClassName('modal');
for (let i = 0; i < modals.length; i++) {
modals[i].style.display = "none";
}
});

Your for loop is replacing the window.onclick listener each time, instead use window.addEventListener('click', function....)
You may wish to store references to these functions so you can window.removeEventListener later on.

So is this close to what you're looking for?
I mostly reused your code and deleted what was in the way.
The essential part is that inside the click handler you're using to close the modals you need to check if the target of the click was one of the buttons. I also removed the spans around the buttons which seemed to not be of any meaningful use.
Lastly, I replaced your onclick = by addEventListener('click', which in contrast to onclick allows for more than one event handler for any given event.
var modals = document.getElementsByClassName('modal');
var btns = document.getElementsByClassName("pop-up");
for (let i = 0; i < btns.length; i++) {
btns[i].addEventListener('click', function() {
modals[i].style.display = "block";
})
}
document.body.addEventListener('click', function(e) {
if (e.target.matches('button.pop-up')) return;
for (let i = 0; i < modals.length; i++) {
modals[i].style.display = "none";
}
});
.modal {
display: none;
/* Hidden by default */
position: fixed;
/* Stay in place */
z-index: 10;
/* 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 */
}
.modal-content {
background-color: #fefefe;
margin: auto;
padding: 20px;
border: 1px solid #888;
width: 80%;
display: table;
}
/* Modal Content */
.modal-content div {
padding: 5px;
margin: 5px;
}
/* The Close Button */
.close-modal {
color: #aaaaaa;
text-align: right;
font-size: 28px;
font-weight: bold;
}
.close-modal:hover,
.close-modal:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
<div class="modal">
<div class="modal-content">
stuff1
<p class="close-modal">×</p>
</div>
</div>
<div class="modal">
<div class="modal-content">stuff2
<p class="close-modal">×</p>
</div>
</div>
<button type="button" class="pop-up">SEND</button>
<button type="button" class="pop-up">SEND</button>

For clarities sake, this is the solution that I have got working:
// Get the modal
var modals = document.getElementsByClassName('modal');
var btns = document.getElementsByClassName("pop-up");
var spans=document.getElementsByClassName("close-modal");
for (let i = 0; i < btns.length; i++) {
btns[i].addEventListener('click', function() {
modals[i].style.display = "block";
})
}
for (let i = 0; i < spans.length; i++) {
spans[i].addEventListener('click', function() {
modals[i].style.display = "none";
})
}
for (let i = 0; i < btns.length; i++) {
modals[i].addEventListener('click', function() {
if (event.target == modals[i]) {
modals[i].style.display = "none";
}
})
}
This seems to work as intended and as far as I am aware there is no issue with creating a listener for everything.

Making a modal image with a thumbnail

For a class assignment, I have to make a gallery of images which i will be using on my final website. when a image is clicked, an enlarged version of that image will be displayed on the page as a modal image. However, the image that is been clicked on has to be a "thumbnail image", which is at a way smaller resolution (480x270) that the enlarged one, which is at 1920x1080.
This is my HTML code (I used anchors for the enlarged image and img src for thumbnail image):
<a class="myImages" id="myImg" href="screenshots/image1.jpg" target="_blank">
<img src="screenshots/thumbnails/image1-480.jpg" alt="description" style="width: 100%">
</a>
CSS:
#myImg {
border-radius: 5px;
cursor: pointer;
transition: 0.3s;
}
#myImg:hover {
opacity: 0.7;
}
.modal {
display: none;
position: fixed;
z-index: 1;
padding-top: 100px;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgb(0, 0, 0);
background-color: rgba(0, 0, 0, 0.9);
}
.modal-content {
margin: auto;
display: block;
width: 100%;
max-width: 70%;
}
#keyframes zoom {
from {
transform: scale(0)
}
to {
transform: scale(1)
}
}
.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;
}
JavaScript:
var modal = document.getElementById('myModal');
var images = document.getElementsByClassName('myImages');
var modalImg = document.getElementById("img01");
for (var i = 0; i < images.length; i++) {
var img = images[i];
img.onclick = function() {
modal.style.display = "block";
modalImg.src = this.href;
}
}
var span = document.getElementsByClassName("close")[0];
span.onclick = function() {
modal.style.display = "none";
}
Most of the code is from W3Schools, I just modified it a little so that it works with a gallery of 20+ images.
However, because there is an anchor tag around the img, if i don't include the target="_blank", when the image is clicked on, it will just open up the enlarged image on the same page and not the modal. If I include the target="_blank", the enlarged image will open in a new tab, but the modal will open up on the original page too.
The result I need is a combination of the two described above, the modal needs to open up without the image opening in a new tab as well.
Is there something I am doing wrong? and how would I fix it?

Adding e.preventDefault() in onclick function should do the job.
And don't forget to bind the event to the function
img.onclick = function(e) {
e.preventDefault()
modal.style.display = "block";
modalImg.src = this.href;
}

2 buttons with same CSS and JS are not working.

See this fiddle. This is my watch trailer button, the first button is working perfectly fine. But the second watch trailer button is not working.
What is the problem with it?
Here is my code:
HTML:
<button id="watchbutton">Watch Trailer &#9658</button>
<br>
<button id="watchbutton">Watch Trailer &#9658</button>
<div id="close">
<div id="trailerdivbox">
<div class="videoWrapper">
<iframe id="video" class="trailervideo" width="560" height="315" data-
src="https://www.youtube.com/embed/TDwJDRbSYbw" src="about:blank" frameborder="0" allowfullscreen></iframe>
</div>
</div>
</div>
CSS:
/* Watch Trailer Button CSS */
#watchbutton {
background-color: #f2f2f2;
color: red;
font-weight: 600;
border: none;
/* This one removes the border of button */
padding: 10px 12px;
}
#watchbutton:hover {
background-color: #e2e2e2;
cursor: pointer;
}
#trailerdivbox {
display: none;
width: 100%;
height: 100%;
position: fixed;
top:0%;
overflow: auto; /* Enable Scrolling */
background-color: rgb(0, 0, 0);
/* Fallback color */
background-color: rgba(0, 0, 0, 0.4);
/* Black w/ opacity */
}
.videoWrapper {
position: relative;
padding-bottom: 56.25%;
/* 16:9 */
padding-top: 25px;
height: 0;
}
.videoWrapper iframe {
position: absolute;
max-width: 560px;
max-height: 315px;
width: 95%;
height: 95%;
left: 0;
right: 0;
margin: auto;
}
Javascript
<script>
// Get the modal
var modal = document.getElementById('trailerdivbox');
// Get the button that opens the modal
var btn = document.getElementById("watchbutton");
function playVideo() {
var video = document.getElementById('video');
var src = video.dataset.src;
video.src = src + '?autoplay=1';
}
function resetVideo() {
var video = document.getElementById('video');
var src = video.src.replace('?autoplay=1', '');
video.src = '';
video.src = src;
}
// When the user clicks the button, open the modal
btn.onclick = function() {
modal.style.display = "block";
playVideo();
}
var trailerbox = document.getElementById("close");
trailerbox.onclick = function() {
modal.style.display = "none";
resetVideo();
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
resetVideo();
}
}
</script>

you can not have same ids. change id to something else.
<button id="watchbutton">Watch Trailer &#9658</button>
<br>
<button id="watchbutton2">Watch Trailer &#9658</button>

Try with classname instead of id .Because id is unique for whole html .For selector use with querySelectorAll()
Updated
declare src of the video in the data-src of button .Then pass the argument with playvideo(this.dataset.src) function .
// Get the modal
var modal = document.getElementById('trailerdivbox');
// Get the button that opens the modal
var btn = document.querySelectorAll('.watchbutton')
function playVideo(src) {
var video = document.getElementById('video');
video.src = 'https://www.youtube.com/embed/'+src + '?autoplay=1'; //add with iframe
}
function resetVideo() {
var video = document.getElementById('video');
var src = video.src.replace('?autoplay=1', '');
video.src = '';
video.src = src;
}
// When the user clicks the button, open the modal
btn.forEach(function(a){
a.onclick = function() {
modal.style.display = "block";
playVideo(this.dataset.src); // pass the src
}
})
var trailerbox = document.getElementById("close");
trailerbox.onclick = function() {
modal.style.display = "none";
resetVideo();
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
resetVideo();
}
}
/* Watch Trailer Button CSS */
#watchbutton {
background-color: #f2f2f2;
color: red;
font-weight: 600;
border: none;
/* This one removes the border of button */
padding: 10px 12px;
}
#watchbutton:hover {
background-color: #e2e2e2;
cursor: pointer;
}
#trailerdivbox {
display: none;
width: 100%;
height: 100%;
position: fixed;
overflow: auto;
/* Enable Scrolling */
background-color: rgb(0, 0, 0);
/* Fallback color */
background-color: rgba(0, 0, 0, 0.4);
/* Black w/ opacity */
}
.videoWrapper {
position: relative;
padding-bottom: 56.25%;
/* 16:9 */
padding-top: 25px;
height: 0;
}
.videoWrapper iframe {
position: absolute;
max-width: 560px;
max-height: 315px;
width: 95%;
height: 95%;
left: 0;
right: 0;
margin: auto;
}
<button id="watchbutton" class="watchbutton" data-src="TDwJDRbSYbw">Watch Trailer &#9658</button>
<br>
<button id="watchbutton" class="watchbutton" data-src="TDwJDRbSYbr">Watch Trailer &#9658</button>
<div id="close">
<div id="trailerdivbox">
<div class="videoWrapper">
<iframe id="video" class="trailervideo" width="560" height="315" data-src="https://www.youtube.com/embed/TDwJDRbSYbw" src="about:blank" frameborder="0" allowfullscreen></iframe>
</div>
</div>
</div>
<br>

You're almost there.
After you fix the issue with the double ids - mentioned by Frits, prasad & others - you still need to tell playVideo to play a different video, depending on which button you push.
Here's how you can fix your code to achieve the desired result :
// Get the modal
var modal = document.getElementById('trailerdivbox');
// Get the button that opens the modal
var btn1 = document.getElementById("TDwJDRbSYbw");
var btn2 = document.getElementById("6H_0aem12_I");
function playVideo(id) {
var video = document.getElementById('video');
var src = video.dataset.src + id;
video.src = src + '?autoplay=1';
}
function resetVideo() {
var video = document.getElementById('video');
var src = video.src.replace('?autoplay=1', '');
video.src = '';
video.src = src;
}
// When the user clicks the button, open the modal
btn1.onclick = function(e) {
modal.style.display = "block";
playVideo(this.id);
}
btn2.onclick = btn1.onclick;
var trailerbox = document.getElementById("close");
trailerbox.onclick = function() {
modal.style.display = "none";
resetVideo();
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
resetVideo();
}
}
/* Watch Trailer Button CSS */
.btn {
background-color: #f2f2f2;
color: red;
font-weight: 600;
border: none;
/* This one removes the border of button */
padding: 10px 12px;
}
.btn:hover {
background-color: #e2e2e2;
cursor: pointer;
}
#trailerdivbox {
display: none;
width: 100%;
height: 100%;
position: fixed;
overflow: auto;
/* Enable Scrolling */
background-color: rgb(0, 0, 0);
/* Fallback color */
background-color: rgba(0, 0, 0, 0.4);
/* Black w/ opacity */
}
.videoWrapper {
position: relative;
padding-bottom: 56.25%;
/* 16:9 */
padding-top: 25px;
height: 0;
}
.videoWrapper iframe {
position: absolute;
max-width: 560px;
max-height: 315px;
width: 95%;
height: 95%;
left: 0;
right: 0;
margin: auto;
}
<button class="btn" id="TDwJDRbSYbw">Watch Trailer &#9658</button>
<br>
<button class="btn" id="6H_0aem12_I">Watch Trailer &#9658</button>
<div id="close">
<div id="trailerdivbox">
<div class="videoWrapper">
<iframe id="video" class="trailervideo" width="560" height="315" data-src="https://www.youtube.com/embed/" src="about:blank" frameborder="0" allowfullscreen></iframe>
</div>
</div>
</div>
<br>
See also this JSFiddle demo

First, It is not good practice to use identical ids.
<button id="watchbutton">Watch Trailer &#9658</button>
And when you use
var btn = document.getElementById("watchbutton");
You get only one button (the first), You should use something like:
<button id="watchbutton" class="watchButton">Watch Trailer &#9658</button>
<br>
<button id="watchbutton2" class="watchButton" >Watch Trailer &#9658</button>
And get them with:
var buttons = document.getElementsByClassName("watchButton");

How to open a popup image for completely different image using javascript?

I have two images to use for instance rose.jpg and mary.jpg. I need to pop up mary.jpg once I click to rose.jpg. I am trying to use modal in here. I know how to do it if the pop image is same as the image to be clicked but in this case my bigger image has a completely different name. I have seen multiple other examples which describes about popup window or form but not image in itself while clicking the image.
Following is what I have done so far. It works only for same image:
<html>
<head>
<style>
#myImg {
border-radius: 5px;
cursor: pointer;
transition: 0.3s;
}
#myImg:hover {opacity: 0.7;}
.modal {
display: none;
position: fixed;
z-index: 1; /* Sit on top */
padding-top: 100px; /* Location of the box */
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgb(0,0,0);
background-color: rgba(0,0,0,0.9);
}
/* Modal Content (image) */
.modal-content {
margin: auto;
display: block;
width: 80%;
max-width: 700px;
}
#caption {
margin: auto;
display: block;
width: 80%;
max-width: 700px;
text-align: center;
color: #ccc;
padding: 10px 0;
height: 150px;
}
.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;
}
</style>
</head>
<body>
<img id="myImg" src="rose.jpg" alt="flower" >
<div id="myModal" class="modal">
<span class="close">×</span>
<img class="modal-content" src="mary.jpg" alt="mary" id="img01">
<div id="caption"></div>
</div>
<script>
var modal = document.getElementById('myModal');
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;
}
var span = document.getElementsByClassName("close")[0];
span.onclick = function() {
modal.style.display = "none";
}
</script>
</body>
</html>
In this example modalImg.src = this.src; is what it is getting the original image to pop up instead of the other image. I need to display mary.jpg which I had given source as <img class="modal-content" src="mary.jpg" alt="mary" id="img01">. Please help.

In your onclick function you are setting the img src as equal to this.src
img.onclick = function(){
modal.style.display = "block";
modalImg.src = this.src;
captionText.innerHTML = this.alt;
}
By doing so, in this use case, every time you click the image you are setting the img src to rose.jpg.
If you remove modalImg.src = this.src; then your modal should just simply 'open', by displaying block onclick, and displaying your HTML, which already defines the img src.
<div id="myModal" class="modal">
<span class="close">×</span>
<img class="modal-content" src="mary.jpg" alt="mary" id="img01">
<div id="caption"></div>
</div>