We Keep Coding

Javascript - Dynamically Loop Image Gallery Descriptions - Show a different description for each image

I'm trying to build an image gallery where when you click on an image, a modal pops up with a larger version of that image, plus a unique title & description.
I can get it to work by hard-coding ids to each image container (id1, id2 etc), but I want it to do this dynamically, rather than me having to write ids for each new image manually.
Everything I've tried so far outputs an uncaught error or similar.
Could anybody please advise (I'm still new to this)!
<div class="gallery content-width">
<div class="img-container">
<img src="./Images/Preview/HH LOW.jpg" alt="Horsehead" id="0" data-original="hh-full.jpg" />
<h4 class="img-title 1">Image title 0</h4>
<p class="image-desc">Description 0</p>
<div class="overlay">
<h3>Veil Nebula</h3>
</div>
</div>
<div class="img-container">
<img src="./Images/Preview/Iris LOW.jpg" alt="Iris" id="1" data-original="iris-full.jpg" />
<h4 class="img-title 1">Image title 1</h4>
<p class="image-desc">Description 1</p>
<div class="overlay">
<h3>Veil</h3>
</div>
</div>
<div class="img-container">
<img src="./Images/Preview/LOIN LOW.jpg" alt="Lion" id="2" data-original="lion-full.jpg" />
<h4 class="img-title 2">Image title 2</h4>
<p class="image-desc">Description 2</p>
<div class="overlay">
<h3>Veil</h3>
</div>
</div>
<div class="img-container">
<img src="./Images/Preview/VEIL LOW.jpg" alt="Veil" id="3" data-original="veil-full.jpg" />
<h4 class="img-title 3">Image title 3</h4>
<p class="image-desc">Description 3</p>
<div class="overlay">
<h3>Veil</h3>
</div>
</div>
</div>
<div class="modal">
<div class="modal-bg">
<img src="" alt="" class="full-img" />
<h4 id=modal-title></h4>
<p id="modal-desc"></p>
</div>
</div>
const modal = document.querySelector(".modal");
const previews = document.querySelectorAll(".gallery img");
const original = document.querySelector(".full-img");
const modalDesc = document.querySelector("#modal-desc");
const modalTitle = document.querySelector("#modal-title");
const imgTitle = document.querySelectorAll(".gallery h4");
const imgDesc = document.querySelectorAll(".gallery p");
previews.forEach(preview => {
preview.addEventListener("click", () => {
modal.classList.add("open");
original.classList.add("open");
const originalSrc = preview.getAttribute("data-original");
original.src = `./Images/full/${originalSrc}`;
modalDesc.textContent = imgDesc[preview.id].textContent;
modalTitle.textContent = imgTitle[preview.id].textContent;
});
});
modal.addEventListener("click", (e) => {
if (e.target.classList.contains("modal")) {
modal.classList.remove("open");
original.classList.remove("open");
}
});
.gallery {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(20em, 1fr));
grid-gap: 2em;
align-items: center;
justify-content: center;
}
.img-container img {
object-fit: cover;
}
.img-container {
position: relative;
}
.overlay {
position: absolute;
top: 0%;
left: 0%;
height: 100%;
width: 100%;
background-color: rgba(0, 0, 0, 0.5);
display: flex;
justify-content: center;
align-items: center;
pointer-events: none;
opacity: 0;
transition: all 0.25s ease-in;
}
.overlay h3 {
color: var(--textColour);
font-family: 'Oxygen', Tahoma, Geneva, Verdana, sans-serif;
font-weight: 400;
font-size: 1.25em;
}
img:hover+.overlay {
opacity: 1;
}
/*MODAL*/
.modal {
background: rgba(0, 0, 0, 0.6);
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
pointer-events: none;
transition: all ease-in-out 0.25s;
}
.modal-bg {
background-color: rgb(184, 184, 184);
width: 85%;
height: 85%;
position: relative;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
/* border-radius: 1em; */
display: flex;
padding: 2em;
gap: 2em;
}
.modal p,
.modal h4 {
color: rgb(143, 44, 44);
font-size: 2rem;
bottom: 5%;
left: 50%;
}
.modal.open {
opacity: 1;
pointer-events: all;
}

Vanilla Javascript Modal not appearing once clicked

I am a beginner and tried to code along in a Javascript tutorial video(Beginner Projects). The problem is my modal did not pop-up once I clicked the button. The new class i've created (.open-modal) in vanilla javascript appeared in the dev tool elements the same as the close button once I unchecked the z-index: -10 and visibility: hidden. I also tried to click the close button but nothing happens. Thanks!
const modalOverlay = document.querySelector(".modal-overlay")
const modalClose = document.querySelector(".close-btn")
const modalBtn = document.querySelector('.btn-primary')
modalBtn.addEventListener("click", function() {
modalOverlay.classList.add("open-modal");
});
modalClose.addEventListener("click", function() {
modalOverlay.classList.remove("open-modal")
});
.open-modal {
visibility: visible;
z-index: 100;
}
.modal-overlay {
position: fixed;
top: 0;
left: 0;
height: 100%;
width: 100%;
display: flex;
place-items: center;
justify-content: center;
background: rgba(76, 52, 90, 0.15);
z-index: -10;
visibility: hidden;
}
.modal-container {
position: relative;
text-align: center;
background: #fff;
font-weight: 300;
border-radius: 10px;
padding: 10px;
height: 400px;
display: flex;
align-items: center;
}
<button class="btn btn-primary">OPEN</button>
</form>
</div>
</div>
</section>
<div class="modal-overlay">
<div class="container modal-container">
<h1>MODAL TEST!</h1>
<button class="close-btn"><i class="fas fa-times"></i></button>
</div>
</div>

You just have to write ".open-modal" after ".modal-container" or use "!important" end of your ".open-modal" styles to work well
const modalOverlay = document.querySelector(".modal-overlay")
const modalClose = document.querySelector(".close-btn")
const modalBtn = document.querySelector('.btn-primary')
modalBtn.addEventListener("click", function() {
modalOverlay.classList.add("open-modal");
});
modalClose.addEventListener("click", function() {
modalOverlay.classList.remove("open-modal")
});
.modal-overlay {
position: fixed;
top: 0;
left: 0;
height: 100%;
width: 100%;
display: flex;
place-items: center;
justify-content: center;
background: rgba(76, 52, 90, 0.15);
z-index: 0;
visibility: hidden;
}
.modal-container {
position: relative;
text-align: center;
background: #fff;
font-weight: 300;
border-radius: 10px;
padding: 10px;
height: 400px;
display: flex;
align-items: center;
}
.open-modal {
visibility: visible;
z-index: 100;
}
<button class="btn btn-primary">OPEN</button>
</form>
</div>
</div>
</section>
<div class="modal-overlay">
<div class="container modal-container">
<h1>MODAL TEST!</h1>
<button class="close-btn"><i class="fas fa-times"></i></button>
</div>
</div>

Keep parallax fixed but change image on scroll?

I have a div where I want to change the image and text when I scroll on it. I have gotten some of the way but I cant figure out how to keep the "parallax-row" fixed, but act like its scrolling? I have a code pen link to help below.
MY GOAL : When you scroll anywhere in the parallax-window everything should stick, but the image and text changes. I have seen some cool image effects using parallax so thats why I am learning it.
codepen
<html>
<body>
<!---------PARALLAX------->
<div class="parallax-window">
<div class="parallax-container">
<div class="parallax-row">
<div class="parallax-image-container">
<img src="https://cdn.pixabay.com/photo/2016/11/18/19/07/happy-1836445_1280.jpg" alt="">
</div>
<div class="parallax-text">
<h1>Title 1</h1>
<h3>This is a description.
</h3>
<div class="mouseicon">
<div class="mousewheel"></div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
CSS
/*PARALLAX */
.parallax-container::-webkit-scrollbar {
display: none;
}
.parallax-window {
position: relative;
height: 400px;
width: 100vw;
overflow-y: scroll;
overflow-x: hidden;
-ms-overflow-style: none; /* IE and Edge */
scrollbar-width: none; /* Firefox */
}
.parallax-container {
display: flex;
align-items: center;
justify-content: flex-start;
flex-direction: column;
height: 1000px;
background-color: rgb(221, 221, 221);
}
.parallax-row {
display: flex;
justify-content: flex-start;
align-items: center;
height: 400px;
width: 100%;
}
.parallax-image-container {
display: block;
height: inherit;
}
.parallax-image-container img {
height: inherit;
}
.parallax-text {
height: inherit;
display: flex;
flex-direction: column;
align-items: left;
justify-content: center;
padding: 0em 4em;
}
.mouseicon {
margin: 1em;
display: flex;
justify-content: center;
width: 40px;
height: 65px;
border: solid 2px black;
border-radius: 50px;
}
.mousewheel {
width: 10px;
height: 20px;
background-color: black;
border-radius: 50px;
animation: scroll 1.5s infinite;
}
#keyframes scroll {
0% {
transform: translateY(0px);
opacity: 0.5;
}
100% {
transform: translateY(5px);
}
}
JS
//-------PARALLAX SCROLL-------- //
const parallaxContainer = document.querySelector(".parallax-window");
const parallaxImage = document.querySelector(".parallax-image-container img");
parallaxContainer.scrolltop = 0;
const parallaxText = document.querySelector(".parallax-text h1")
var scrollHandler = function () {
var newImageUrl = parallaxImage.src;
var scrollTopParallax =
parallaxContainer.scrollTop || parallaxContainer.scrollTop;
if (scrollTopParallax > 100) {
newImageUrl =
"https://cdn.pixabay.com/photo/2016/11/29/07/16/balancing-1868051__480.jpg";
parallaxText.innerHTML = "Title 2"
}
if (scrollTopParallax < 100) {
newImageUrl =
"https://cdn.pixabay.com/photo/2016/11/18/19/07/happy-1836445_1280.jpg";
parallaxText.innerHTML = "Title 1"
}
parallaxImage.src = newImageUrl;
console.log("new: " + parallaxImage.src);
};
parallaxContainer.addEventListener("scroll", scrollHandler);

I have updated my codepen with my own answer. essentially creating an overlay to scroll on and then changing the elements based on that invisible overlays scroll position. see link to codepen above.

Assign image to different buttons

How can I make the picture change with each different button clicked and make the picture shown to be the default?
From the code snippet, please notice how each button should change the image.
Thank you!
* {
box-sizing: border-box;
}
.imagebox {
width: 50%;
float: left;
height: 300px;
position: relative;
}
.imagebox img {
position: relative;
top: 40%;
transform: translateY(-50%);
overflow: hidden;
width: 100%;
}
.textbox-cont {
width: 50%;
height: 300px;
float: right;
position: relative;
overflow: hidden;
}
.textbox {
color: #000000;
position: absolute;
text-align: center;
width: 100%;
padding: 20px;
top: 53%;
transform: translateY(-50%);
}
#media only screen and (max-width: 700px) {
.imagebox,
.textbox-cont {
width: 100%;
display: flex;
flex-direction: column;
}
<div class="imagebox"></div>
<img src="https://s.ftcdn.net/v2013/pics/all/curated/RKyaEDwp8J7JKeZWQPuOVWvkUjGQfpCx_cover_580.jpg?r=1a0fc22192d0c808b8bb2b9bcfbf4a45b1793687" alt="">
<div class="textbox-cont">
<div class="textbox">
Pick a color to see how it will look<br>
<button style="margin: 8px;">Cobalt Blue</button><br>
<button style="margin: 8px">Cobaltt Blue</button><br>
<button style="margin: 8px">Cardinal Red</button><br>
<button style="margin: 8px">Coral Orange</button><br>
</div>
</div>

You can addEventListener to each button and change the image src attribute depending on the button id:
const img = document.getElementById('img');
for (let button of document.getElementsByTagName('button')) {
button.addEventListener('click', () => {
switch (button.id) {
case 'but1':
img.src = "https://s.ftcdn.net/v2013/pics/all/curated/RKyaEDwp8J7JKeZWQPuOVWvkUjGQfpCx_cover_580.jpg?r=1a0fc22192d0c808b8bb2b9bcfbf4a45b1793687";
break;
case 'but2':
img.src = "https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcTgfERcK1BcdgSekipirrCw6zpQJ9l40h48Musvp7-dfy8Ym3Yl&usqp=CAU";
break;
case 'but3':
img.src = "https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcS9wvzviWw6ag6p_aZgw6kRs267_3jpiI_gGCxvLh7U9QIVAmQa&usqp=CAU";
break;
case 'but4':
img.src = "https://xzdl43v0mdf2m45tz2aj7kkv35-wpengine.netdna-ssl.com/wp-content/uploads/2010/10/orange-780x400.jpg";
break;
}
});
}
*{
box-sizing:border-box;
}
.imagebox {
width: 50%;
float: left;
height:300px;
position:relative;
}
.imagebox img{
position:relative;
top:40%;
transform:translateY(-50%);
overflow:hidden;
width: 100%;
}
.textbox-cont {
width: 50%;
height:300px;
float: right;
position:relative;
overflow:hidden;
}
.textbox{
color: #000000;
position:absolute;
text-align: center;
width:100%;
padding:20px;
top:53%;
transform:translateY(-50%);
}
#media only screen and (max-width: 700px) {
.imagebox,
.textbox-cont {
width: 100%;
display: flex;
flex-direction: column;
}
<div class="imagebox">
<img id="img" src="https://s.ftcdn.net/v2013/pics/all/curated/RKyaEDwp8J7JKeZWQPuOVWvkUjGQfpCx_cover_580.jpg?r=1a0fc22192d0c808b8bb2b9bcfbf4a45b1793687"
alt="">
</div>
<div class="textbox-cont">
<div class="textbox">
Pick a color to see how it will look<br>
<button style="margin: 8px" id="but1">Cobalt Blue</button><br>
<button style="margin: 8px" id="but2">Cobaltt Blue</button><br>
<button style="margin: 8px" id="but3">Cardinal Red</button><br>
<button style="margin: 8px" id="but4">Coral Orange</button><br>
</div>
</div>

Popup used to display on webpage, but no longer does

I did have a popup on one of my webpages that used to display when I clicked a link but, while not knowing what's changed, It appears to have stopped displaying when I click the link. When using 'Inspect Element' using Chrome, the correct elements have the attribute 'display: block !important;' so should display.
Here is the code snippet:
function popup() {
var popup = document.getElementById("popup")
var popupLayer = document.getElementById("popup-layer")
popup.classList.toggle("show")
popupLayer.classList.toggle("show")
}
html, body {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.click {
cursor: pointer;
}
.popup {
background-color: white;
height: 70%;
width: 70%;
display: none;
position: relative;
border: 1px solid;
padding: 20px;
z-index: 2;
align-self: center;
}
.popup-wrapper {
height: 100%;
width: 100%;
visibility: hidden;
display: none;
position: absolute;
display: flex;
justify-content: center;
}
.show {
display: block !important;
}
.popup-layer {
background-color: gray;
opacity: 0.3;
position: absolute;
height: 100%;
width: 100%;
margin-top: -20px;
z-index: 1;
display: none;
}
#page-1 {
background-color: #b3d9ff;
height: 100vh;
width: 100%;
}
<div id="page-1">
<div id="popup-wrapper" class="popup-wrapper">
<div id="popup" class="popup center">
<a class="click" onclick="popup()">Click me!</a>
</div>
</div>
<a class="click" onclick="popup()">Click me!</a>
<div id="popup-layer" class="popup-layer">
</div>
</div>

This is really a debugging question which is supposed to be done by you or at the least told us what you think it is.
Anyway, in .popup-wrapper I took out height as I presume it was spanning out of the view.
function popup() {
var popup = document.getElementById("popup");
var popupLayer = document.getElementById("popup-layer");
popup.classList.toggle("show");
popupLayer.classList.toggle("show");
}
html, body {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.click {
cursor: pointer;
}
.popup {
background-color: red;
height: 70%;
width: 70%;
display: none;
position: relative;
border: 1px solid;
padding: 20px;
z-index: 2;
align-self: center;
}
.popup-wrapper {
width: 100%;
display: none;
position: absolute;
display: flex;
justify-content: center;
}
.show {
display: block !important;
}
.popup-layer {
background-color: gray;
opacity: 0.3;
position: absolute;
height: 100%;
width: 100%;
margin-top: -20px;
z-index: 1;
display: none;
}
#page-1 {
background-color: #b3d9ff;
height: 100vh;
width: 100%;
}
<div id="page-1">
<div id="popup-wrapper" class="popup-wrapper">
<div id="popup" class="popup center">
<a class="click" onclick="popup()">Click me!</a>
</div>
</div>
<a class="click" onclick="popup()">Click me!</a>
<div id="popup-layer" class="popup-layer"></div>
</div>

yes thats popup-wrapper that is origin of the problem. But seing that you put your events in the a element its prefered to use this code to prevent the redirection or use button instead of this
var popupDiv = document.getElementById("popup");
var popupLayer = document.getElementById("popup-layer");
var clickMe=document.querySelectorAll(".click");
function popup() {
popupDiv.classList.toggle("show");
popupLayer.classList.toggle("show");
}
clickMe.forEach(function(elem){
elem.addEventListener('click',function(e){
e.preventDefault();
popup()},false);
});

CSS thus change this part
.popup-wrapper {
height: 50%;
width: 100%;
display: none;
position: absolute;
display: flex;
z-index: 0;
justify-content: center;
}
JS for the best way
var popupDiv = document.getElementById("popup");
var popupLayer = document.getElementById("popup-layer");
var clickMe=document.querySelectorAll(".click");
function popup() {
popupDiv.classList.toggle("show");
popupLayer.classList.toggle("show");
}
clickMe.forEach(function(elem){
elem.addEventListener('click',function(e){
e.preventDefault();
popup()},false);
});