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;
}

Why do the slideshows not work (anymore)?

As you can see in my previous question, I've managed to get a slideshow working.
I wanted to put on more slideshows, unfortunately they don't work although I think I've used the same code/design.
And the original slideshow is also not working anymore :(. I got stationary slide shows now.
Can anybody see what I should do in order to get all slideshows working again?
Here's the code:
HTML
`
<!-- Featured ad 1 -->
<div id="SlideshowFeaturedAd1">
<div>
<img src="Img4.jpg" height="150px" width="75px">
</div>
<div>
<img src="Img5.jpg" height="150px" width="75px">
</div>
<div>
<img src="Img6.jpg" height="150px" width="75px">
</div>
</div>
<!-- Featured ad 2 -->
<div id="SlideshowFeaturedAd2">
<div>
<img src="Img7.jpg" height="150px" width="75px">
</div>
<div>
<img src="Img8.jpg" height="150px" width="75px">
</div>
<div>
<img src="Img9.jpg" height="150px" width="75px">
</div>
</div>
<!-- Featured ad 3 -->
<div id="SlideshowFeaturedAd3">
<div>
<img src="Img10.jpg" height="150px" width="75px">
</div>
<div>
<img src="Img11.jpg" height="150px" width="75px">
</div>
<div>
<img src="Img12.jpg" height="150px" width="75px">
</div>
</div>`
CSS
/* General settings */
body {
font-family: helvetica;
}
* {
font-size: 100%;
font-family: helvetica;
}
img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* Starring ads */
img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
#SlideshowStarringAds {
margin: 80px auto;
position: absolute;
top: 20%;
left: 25%;
width: 350px;
height: 350px;
padding: 10px;
box-shadow: 0 0 15px rgba(0, 0, 0, 0.4);
}
#SlideshowStarringAds {
height: 300px;
width: 300px;
}
#SlideshowStarringAds > div {
position: absolute;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
}
/* Featured ad 1 */
img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
#SlideshowFeaturedAd1 {
margin: 80px auto;
position: absolute;
top: 20%;
right: 25%;
width: 150px;
height: 75px;
padding: 10px;
box-shadow: 0 0 7px rgba(0, 0, 0, 0.4);
}
#SlideshowFeaturedAd1 {
height: 75px;
width: 150px;
}
#SlideshowFeaturedAd1 > div {
position: absolute;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
}
/* Featured ad 2 */
img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
#SlideshowFeaturedAd2 {
margin: 80px auto;
position: absolute;
top: 34%;
right: 39%;
width: 150px;
height: 75px;
padding: 10px;
box-shadow: 0 0 7px rgba(0, 0, 0, 0.4);
}
#SlideshowFeaturedAd2 {
height: 75px;
width: 150px;
}
#SlideshowFeaturedAd2 > div {
position: absolute;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
}
/* Featured ad 3 */
img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
#SlideshowFeaturedAd3 {
margin: 80px auto;
position: absolute;
top: 48%;
right: 25%;
width: 150px;
height: 75px;
padding: 10px;
box-shadow: 0 0 7px rgba(0, 0, 0, 0.4);
}
#SlideshowFeaturedAd3 {
height: 75px;
width: 150px;
}
#SlideshowFeaturedAd3 > div {
position: absolute;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
}
Javascript in HTML head
<!-- Code Javascript belonging to starring ads -->
<script src="jquery-1.8.3.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#slideshow > div:gt(0)").hide();
setInterval(function() {
$('#slideshow > div:first')
.fadeOut(1000)
.next()
.fadeIn(1000)
.end()
.appendTo('#slideshow');
}, 3000);
});
</script>
<!-- End of Java script -->
Javascript file
Downloadable from OneDrive

Well, in your javascript, you can add:
var slideshow1 = document.getElementById("SlideshowFeaturedAd1");
slideshow1.currentSlideIndex = 1;
showSlides(slideshow1.currentSlideIndex, slideshow1);
var slideshow2 = document.getElementById("SlideshowFeaturedAd2");
slideshow2.currentSlideIndex = 1;
showSlides(slideshow2.currentSlideIndex, slideshow2);
var slideshow2 = document.getElementById("SlideshowFeaturedAd3");
slideshow2.currentSlideIndex = 1;
showSlides(slideshow2.currentSlideIndex, slideshow2);
function plusSlides(n, slideshow) {
showSlides(slideshow.currentSlideIndex += n, slideshow);
}
function currentSlide(n, slideshow) {
showSlides(slideshow.currentSlideIndex = n, slideshow);
}
function showSlides(n, slideshow) {
var i;
var slides = slideshow.getElementsByClassName("mySlides");
var dots = slideshow.getElementsByClassName("dot");
if (n > slides.length) {slideshow.currentSlideIndex = 1}
if (n < 1) {slideshow.currentSlideIndex = slides.length}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideshow.currentSlideIndex-1].style.display = "block";
dots[slideshow.currentSlideIndex-1].className += " active";
}
Then in your CSS, you can add:
* {box-sizing:border-box}
body {font-family: Verdana,sans-serif;margin:0}
.mySlides {display:none}
/* Slideshow container */
.slideshow-container {
max-width: 1000px;
position: relative;
margin: auto;
}
/* Next & previous buttons */
.prev, .next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
padding: 16px;
margin-top: -22px;
color: white;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
}
/* Position the "next button" to the right */
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
background-color: rgba(0,0,0,0.8);
}
/* Caption text */
.text {
color: #f2f2f2;
font-size: 15px;
padding: 8px 12px;
position: absolute;
bottom: 8px;
width: 100%;
text-align: center;
}
/* Number text (1/3 etc) */
.numbertext {
color: #f2f2f2;
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 0;
}
/* The dots/bullets/indicators */
.dot {
cursor:pointer;
height: 13px;
width: 13px;
margin: 0 2px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
}
.active, .dot:hover {
background-color: #717171;
}
/* Fading animation */
.fade {
-webkit-animation-name: fade;
-webkit-animation-duration: 1.5s;
animation-name: fade;
animation-duration: 1.5s;
}
#-webkit-keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
#keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
/* On smaller screens, decrease text size */
#media only screen and (max-width: 300px) {
.prev, .next,.text {font-size: 11px}
}
Finally in your HTML, you can add:
<!-- Featured ad 1 -->
<div id="SlideshowFeaturedAd1">
<div class="mySlides fade">
<div class="numbertext">1 / 3</div>
<img src="Img4.jpg" style="height: 150px; width: 75px;">
<div class="text">Caption Text</div>
</div>
<div class="mySlides fade">
<div class="numbertext">1 / 3</div>
<img src="Img5.jpg" style="height: 150px; width: 75px;">
<div class="text">Caption Text</div>
</div>
<div class="mySlides fade">
<div class="numbertext">1 / 3</div>
<img src="Img6.jpg" style="height: 150px; width: 75px;">
<div class="text">Caption Text</div>
</div>
<a class="prev" onclick="plusSlides(-1,slideshow1)">❮</a>
<a class="next" onclick="plusSlides(1, slideshow1)">❯</a>
<div style="text-align:center">
<span class="dot" onclick="currentSlide(1, slideshow1)"></span>
<span class="dot" onclick="currentSlide(2, slideshow1)"></span>
<span class="dot" onclick="currentSlide(3, slideshow1)"></span>
</div>
</div>
<br>
<!-- Featured ad 2 -->
<div id="SlideshowFeaturedAd2">
<div class="mySlides fade">
<div class="numbertext">1 / 3</div>
<img src="Img7.jpg" style="height: 150px; width: 75px;">
<div class="text">Caption Text</div>
</div>
<div class="mySlides fade">
<div class="numbertext">1 / 3</div>
<img src="Img8.jpg" style="height: 150px; width: 75px;">
<div class="text">Caption Text</div>
</div>
<div class="mySlides fade">
<div class="numbertext">1 / 3</div>
<img src="Img9.jpg" style="height: 150px; width: 75px;">
<div class="text">Caption Text</div>
</div>
<a class="prev" onclick="plusSlides(-1,slideshow1)">❮</a>
<a class="next" onclick="plusSlides(1, slideshow1)">❯</a>
<div style="text-align:center">
<span class="dot" onclick="currentSlide(1, slideshow1)"></span>
<span class="dot" onclick="currentSlide(2, slideshow1)"></span>
<span class="dot" onclick="currentSlide(3, slideshow1)"></span>
</div>
</div>
<br>
<!-- Featured ad 3 -->
<div id="SlideshowFeaturedAd3">
<div class="mySlides fade">
<div class="numbertext">1 / 3</div>
<img src="Img10.jpg" style="height: 150px; width: 75px;">
<div class="text">Caption Text</div>
</div>
<div class="mySlides fade">
<div class="numbertext">1 / 3</div>
<img src="Img11.jpg" style="height: 150px; width: 75px;">
<div class="text">Caption Text</div>
</div>
<div class="mySlides fade">
<div class="numbertext">1 / 3</div>
<img src="Img12.jpg" style="height: 150px; width: 75px;">
<div class="text">Caption Text</div>
</div>
<a class="prev" onclick="plusSlides(-1,slideshow1)">❮</a>
<a class="next" onclick="plusSlides(1, slideshow1)">❯</a>
<div style="text-align:center">
<span class="dot" onclick="currentSlide(1, slideshow1)"></span>
<span class="dot" onclick="currentSlide(2, slideshow1)"></span>
<span class="dot" onclick="currentSlide(3, slideshow1)"></span>
</div>
</div>
<br>
Also, this question is similar to:
How do I make multiple slideshows in the same html document?
Since, that question has an answer to this question.

How do I make text show up next to my picture when I click on it?

I'm trying to have a paragraph of text appear next to each image after I pick it. Currently, all I have is the image showing up after I click it. I don't know how to add text next to the image that only shows up when it is clicked on. I'm new to programming so anything could help. If you guys need more information, let me know. Thanks.
function myFunction(imgs) {
var expandImg = document.getElementById("expandedImg");
var imgText = document.getElementById("imgtext");
expandImg.src = imgs.src;
imgText.innerHTML = imgs.alt;
expandImg.parentElement.style.display = "block";
}
#font-face {
font-family: 'futuralight';
src: url('../Fonts/Futura Light/futura_light_regular-webfont.woff2') format('woff2'), url('../Fonts/Futura Light/futura_light_regular-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'tekoregular';
src: url('../Fonts/Teko/teko-regular-webfont.woff2') format('woff2'), url('../Fonts/Teko/teko-regular-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'playfair_displayregular';
src: url('../Fonts/Playfair Display/playfairdisplay-regular-webfont.woff2') format('woff2'), url('../Fonts/Playfair Display/playfairdisplay-regular-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'poppinsmedium';
src: url('../Fonts/Poppins/poppins-medium-webfont.woff2') format('woff2'), url('../Fonts/Poppins/poppins-medium-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
* {
margin: 0px;
padding: 0px;
border: 0px;
}
.topnav {
background-color: rgb(84, 104, 217);
overflow: hidden;
font-family: 'futuralight';
font-weight: 900;
}
.topnav a {
float: left;
color: #f2f2f2;
text-align: center;
padding: 20px 21px;
text-decoration: none;
font-size: 19px;
position: relative;
left: 2%;
}
.topnav a:before {
content: "";
position: absolute;
width: 84%;
height: 2px;
bottom: 6px;
left: 8%;
background-color: white;
visibility: hidden;
transform: scaleX(0);
transition: all 0.3s ease-in-out 0s;
}
.topnav a:hover:before {
visibility: visible;
transform: scaleX(1);
}
.topnav a.active-menu:before {
content: "";
position: absolute;
width: 84%;
height: 2px;
bottom: 6px;
left: 8%;
background-color: white;
visibility: visible;
transform: scaleX(1);
transition: all 0.3s ease-in-out 0s;
}
.column {
float: left;
width: 25%;
padding: 10px;
}
/* Style the images inside the grid */
.column img {
opacity: 0.85;
cursor: pointer;
}
.column img:hover {
opacity: 1;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
/* The expanding image container */
.container {
position: relative;
display: none;
width:50%;
}
/* Expanding image text */
#imgtext {
position: absolute;
bottom: 15px;
left: 15px;
color: white;
font-size: 20px;
}
/* Closable button inside the expanded image */
.closebtn {
position: absolute;
top: 10px;
right: 15px;
color: white;
font-size: 35px;
cursor: pointer;
}
.row{
position: absolute;
top:600px;
}
.testtext{
color:black;
background-color: grey;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="../CSS/styleprojects.css" />
<script src='../Javascript/script.js'></script>
<title>Projects</title>
</head>
<body>
<header class="topnav" id="topnav">
<a class="link" href="../index.html">Home</a>
<a class="link" href="#Academics">Academics</a>
<a class="active-menu" href="projects.html">Projects</a>
<a class="link" href="communityservice.html">Community Service</a>
</header>
<div style="text-align:center">
<h2>Tabbed Image Gallery</h2>
<p>Click on the images below:</p>
<div class="container">
<span onclick="this.parentElement.style.display='none'" class="closebtn">×</span>
<img id="expandedImg" style="width:100%">
<div id="imgtext"></div>
</div>
</div>
<div class="row">
<div class="column">
<img src="https://miro.medium.com/max/1200/1*mk1-6aYaf_Bes1E3Imhc0A.jpeg" alt="Nature" style="width:100%" onclick="myFunction(this);">
</div>
<div class="column">
<img src="https://s.yimg.com/ny/api/res/1.2/Petngc9GmDGVfvqWtZW1uw--/YXBwaWQ9aGlnaGxhbmRlcjt3PTcwNTtoPTM4MC43/https://s.yimg.com/uu/api/res/1.2/p2FH9i2oATkHA6O0ucuC9A--~B/aD0yMTY7dz00MDA7c209MTthcHBpZD15dGFjaHlvbg--/https://media.zenfs.com/en/prnewswire.com/d908212583d777d158af74cb171ec897" alt="Snow" style="width:100%" onclick="myFunction(this);">
</div>
<div class="column">
<img src="https://engineering.wustl.edu/news/PublishingImages/141020_jwb_brookings_007-1915x768.jpg?RenditionID=1" alt="Mountains" style="width:100%" onclick="myFunction(this);">
</div>
<div class="column">
<img src="https://techcrunch.com/wp-content/uploads/2019/01/McKelvey-courtyard.jpg" alt="Lights" style="width:100%" onclick="myFunction(this);">
</div>
</div>
</body>
</html>

I made a few changes and additions. Here's the expanded image with the paragraph section next to it:
The new expanded image block with side paragraph:
<div id="expanded-wrapper">
<div class="container">
<span onclick="this.parentElement.style.display='none'"
class="closebtn">×</span>
<img id="expandedImg" style="width:100%">
<div id="imgtext"></div>
</div>
<div id="img-paragraph">
<p>image paragraph content goes here</p>
</div>
</div>
Plus some changes and additions to the CSS.
See the snippet for complete details.
function myFunction(imgs) {
var expandImg = document.getElementById("expandedImg");
var imgText = document.getElementById("imgtext");
var imgParagraph = document.getElementById('img-paragraph');
expandImg.src = imgs.src;
imgText.innerHTML = imgs.alt;
// use 'display:table-cell' to keep elements side-by-side
expandImg.parentElement.style.display = "table-cell";
imgParagraph.style.display = 'table-cell';
}
* {
margin: 0px;
padding: 0px;
border: 0px;
}
.topnav {
background-color: rgb(84, 104, 217);
overflow: hidden;
font-family: 'futuralight';
font-weight: 900;
}
.topnav a {
float: left;
color: #f2f2f2;
text-align: center;
padding: 20px 21px;
text-decoration: none;
font-size: 19px;
position: relative;
left: 2%;
}
.topnav a:before {
content: "";
position: absolute;
width: 84%;
height: 2px;
bottom: 6px;
left: 8%;
background-color: white;
visibility: hidden;
transform: scaleX(0);
transition: all 0.3s ease-in-out 0s;
}
.topnav a:hover:before {
visibility: visible;
transform: scaleX(1);
}
.topnav a.active-menu:before {
content: "";
position: absolute;
width: 84%;
height: 2px;
bottom: 6px;
left: 8%;
background-color: white;
visibility: visible;
transform: scaleX(1);
transition: all 0.3s ease-in-out 0s;
}
.column {
float: left;
width: 25%;
padding: 10px;
}
/* Style the images inside the grid */
.column img {
opacity: 0.85;
cursor: pointer;
}
.column img:hover {
opacity: 1;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
/* The expanding image container */
.container {
position: relative;
display: none;
width: 50%;
}
/* Expanding image text */
#imgtext {
position: absolute;
bottom: 15px;
left: 15px;
color: white;
font-size: 20px;
}
/* image paragraph */
#img-paragraph {
display: none;
width: 30%;
outline: 1px solid red;
padding: 0.5rem;
vertical-align: top;
text-align: left;
}
/* Closable button inside the expanded image */
.closebtn {
position: absolute;
top: 10px;
right: 15px;
color: white;
font-size: 35px;
cursor: pointer;
}
.row {
position: absolute;
top: 600px;
}
<header class="topnav" id="topnav">
<a class="link" href="../index.html">Home</a>
<a class="link" href="#Academics">Academics</a>
<a class="active-menu" href="projects.html">Projects</a>
<a class="link" href="communityservice.html">Community Service</a>
</header>
<div style="text-align:center">
<h2>Tabbed Image Gallery</h2>
<p>Click on the images below:</p>
<div id="expanded-wrapper">
<div class="container">
<span onclick="this.parentElement.style.display='none'" class="closebtn">×</span>
<img id="expandedImg" style="width:100%">
<div id="imgtext"></div>
</div>
<div id="img-paragraph">
<p>image paragraph content goes here</p>
</div>
</div>
</div>
<div class="row">
<div class="column">
<img src="https://miro.medium.com/max/1200/1*mk1-6aYaf_Bes1E3Imhc0A.jpeg" alt="Nature" style="width:100%" onclick="myFunction(this);">
</div>
<div class="column">
<img src="https://s.yimg.com/ny/api/res/1.2/Petngc9GmDGVfvqWtZW1uw--/YXBwaWQ9aGlnaGxhbmRlcjt3PTcwNTtoPTM4MC43/https://s.yimg.com/uu/api/res/1.2/p2FH9i2oATkHA6O0ucuC9A--~B/aD0yMTY7dz00MDA7c209MTthcHBpZD15dGFjaHlvbg--/https://media.zenfs.com/en/prnewswire.com/d908212583d777d158af74cb171ec897"
alt="Snow" style="width:100%" onclick="myFunction(this);">
</div>
<div class="column">
<img src="https://engineering.wustl.edu/news/PublishingImages/141020_jwb_brookings_007-1915x768.jpg?RenditionID=1" alt="Mountains" style="width:100%" onclick="myFunction(this);">
</div>
<div class="column">
<img src="https://techcrunch.com/wp-content/uploads/2019/01/McKelvey-courtyard.jpg" alt="Lights" style="width:100%" onclick="myFunction(this);">
</div>
</div>

First make sure the image is not taking up all the space inside the container by removing its width 100%:
<img id="expandedImg" style="width:100%">
change to:
<img id="expandedImg">
Then you can set a different width for your image inside the css and remove the absolute positioning from the text.
You have loads of options here to make them appear side by side but for wrapping text around pictures you can use floats.
Also don't forget to change the text color as it won't be visible when white on this white background.
Final css for the image and the text:
#imgtext {
color: black;
font-size: 20px;
float:left;
}
#expandedImg{
float:left;
width:50%;
}

Unequal div heights

I want to make unequal images heights and keep the layout the same on resize without changing the aspect ratio of the image on here is what i want to do :
https://i.ibb.co/nkSXJ4f/Screen-Shot-2019-04-12-at-6-32-32-AM.png
I know this is ease with css grid but i think i can make my code more simple since the layout is not complicated
What i've tried
body {
height: 100%;
}
.card {
margin-right: 20px;
margin-bottom: 2.6668rem;
display: inline-block;
vertical-align: top;
}
.medium {
width: 65%;
margin-right: 5%;
height: 600px;
overflow: hidden;
}
.small {
width: 25%;
height: 300px;
overflow: hidden;
}
img {
width: 100%;
}
<main class="grid">
<a href="" class="card medium">
<figcaption class="caption">project title</figcaption>
<div class="card-image">
<img src="https://images.unsplash.com/photo-1554565166-cafee0896506?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=934&q=80" alt="">
</div>
</a>
<a href="" class="card small">
<figcaption class="caption">Kettle</figcaption>
<div class="card-image">
<img src="https://images.unsplash.com/photo-1554565166-cafee0896506?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=934&q=80" alt="">
</div>
</a>
</main>

Try this code
body {
height: 100%;
}
*{
box-sizing:border-box;
}
.card {
margin-right: 20px;
vertical-align: top;
height:100vh;
display: block;
overflow: hidden;
}
.medium {
width: 65%;
margin-right: 5%;
float:left
}
.small {
width: 25%;
float:left
}
.card-image { height:100%; }
.card-image img {
width: 100%;
height: 100%;
object-fit: cover;
}
<main class="grid">
<a href="" class="card medium">
<figcaption class="caption">project title</figcaption>
<div class="card-image">
<img src="https://images.unsplash.com/photo-1554565166-cafee0896506?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=934&q=80" alt="">
</div>
</a>
<a href="" class="card small">
<figcaption class="caption">Kettle</figcaption>
<div class="card-image">
<img src="https://images.unsplash.com/photo-1554565166-cafee0896506?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=934&q=80" alt="">
</div>
</a>
</main>

CSS && JavaScript Scrolling div

I've got a div with images in it. There are going to be a lot of images so I want to be able to scroll left and right within the div with the use of buttons. I previous had the code working but upon changing the divs from media queried and response to static straight CSS, it no longer scrolls.
html:
<div id="maincontent">
<h3 align="center" > Title </h3>
<div id="gallery-display">
<div id="image-1"><img src="image1.jpg" alt="" /></div>
<div id="image-2"><img src="image2.jpg" alt="" /></div>
<div id="image-3"><img src="image3.jpg" alt="" /></div>
<div id="image-4"><img src="image4.jpg" alt="" /></div>
</div>
<div id="gallery-slider-parent">
<div class="left-slider-button">
<input
type="button"
value="◄"
onmousedown="scrollDiv('gallery-slider', 3)"
onmouseup="clearTimeout(timer1)"
/>
</div>
<div id="gallery-slider">
<img src="image1.jpg" />
<img src="image2.jpg" />
<img src="image3.jpg" />
<img src="image4.jpg" />
<img src="image1.jpg" />
<img src="image2.jpg" />
<img src="image3.jpg" />
<img src="image4.jpg" />
<img src="image1.jpg" />
<img src="image2.jpg" />
<img src="image3.jpg" />
<img src="image4.jpg" />
</div>
<div class="right-slider-button">
<input
type="button"
value="►"
onmousedown="scrosllDiv('gallery-slider', 3)"
onmouseup="clearTimeout(timer1)"
/>
</div>
</div>
</div>
css:
body {
background-color: #000;
}
#maincontent {
width: 960px;
margin: 0 auto;
background-color: #000;
color: #fff;
}
#gallery-display {
height: 500px;
margin: 0 auto;
position: relative;
overflow: hidden;
background-color: #000;
}
#gallery-display img {
display: block;
margin: 0 auto;
height: 500px;
right: 0;
left: 0;
}
#gallery-display [id^='image']:target img {
top: 0;
display: block;
margin: 0 auto;
height: 500px;
}
#gallery-display [id^="image"] img {
position: absolute;
top: -500px;
border: 0;
-moz-transition: top 0.5s ease-in;
-ms-transition: top 0.5s ease-in;
-webkit-transition: top 0.5s ease-in;
-o-transition: top 0.5s ease-in;
}
#gallery-display [id^='image']:target a {
background: #fff;
border: 3px solid #333;
width: 10px;
height: 10px;
}
#gallery-slider-parent {
background-color: #000;
position: relative;
width: 960px;
overflow: hidden;
float: left;
}
#gallery-slider {
background-color: #000;
display: inline;
width: 94%;
float: left;
height: 120px;
overflow: auto;
white-space: nowrap;
}
#gallery-slider img {
height: 75px;
padding: 15px;
float: none;
}
.left-slider-button input[type="button"]{
opacity: .7;
color: #FFF;
float: left;
width: 28px;
border: none;
height: 100px;
background-color: #151515;
}
.right-slider-button input[type="button"]{
opacity: .7;
color: #FFF;
float: left;
width: 28px;
border: none;
height: 100px;
display: inline-block;
background-color: #151515;
}
javascript:
var timer1;
function scrollDiv(divId, depl) {
var scroll_container = document.getElementById(divId);
scroll_container.scrollLeft -= depl;
timer1 = setTimeout('scrollDiv("'+divId+'", '+depl+')', 10);
}