I have built a gallery that supposes to change the main picture when other one is chosen from the small menu down below, however, it does not react when i click on other small photos it just stays the same, could anyone please help with it
// image gallery
const changeimage = (src) => {
document.getElementById("main").src = src
}.gallery {
width: 90%;
margin: 0 auto;
}
.gallery-main {
width: 45rem;
height: 30rem;
margin: 0 auto;
}
.gallery-main img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 8px;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
}
.gallery-p {
display: flex;
justify-content: center;
flex-wrap: wrap;
margin-top: 2rem;
}
.gallery-p img {
width: 9rem;
height: 7rem;
object-fit: cover;
border-radius: 4px;
margin: 0.5rem;
cursor: pointer;
}<div class="gallery">
<div class="gallery-main">
<img src="images/dublin culture1.jpg" alt="" id="main">
</div>
<div class="gallery-p">
<img src="images/dublin culture2.jpg" alt="" onclick="changeimage(this.src)">
<img src="images/dublin culture3.jpg" alt="" onclick="changeimage(this.src)">
<img src="images/dublin culture4.jpg" alt="" onclick="changeimage(this.src)">
<img src="images/dublin people1.jpg" alt="" onclick="changeimage(this.src)">
<img src="images/dublin people2.jpg" alt="" onclick="changeimage(this.src)">
<img src="images/dublin people3.jpg" alt="" onclick="changeimage(this.src)">
</div>
</div>Try this!
document.getElementById("main").src = "https://i.ibb.co/2kfJ15Z/image-cropped.jpg"
const changeimage = (src) => {
document.getElementById("main").src = src
}.gallery {
width: 90%;
margin: 0 auto;
}
.gallery-main {
width: 45rem;
height: 30rem;
margin: 0 auto;
}
.gallery-main img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 8px;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
}
.gallery-p {
display: flex;
justify-content: center;
flex-wrap: wrap;
margin-top: 2rem;
}
.gallery-p img {
width: 9rem;
height: 7rem;
object-fit: cover;
border-radius: 4px;
margin: 0.5rem;
cursor: pointer;
}<div class="gallery">
<div class="gallery-main">
<img src="images/dublin culture1.jpg" alt="" id="main">
</div>
<div class="gallery-p">
<img src="https://i.ibb.co/2kfJ15Z/image-cropped.jpg" alt="" onclick="changeimage(this.src)">
<img src="https://i.ibb.co/0GwkygJ/imagename-2.png" alt="" onclick="changeimage(this.src)">
<img src="https://i.ibb.co/2kfJ15Z/image-cropped.jpg" alt="" onclick="changeimage(this.src)">
<img src="https://i.ibb.co/0GwkygJ/imagename-2.png" alt="" onclick="changeimage(this.src)">
<img src="https://i.ibb.co/2kfJ15Z/image-cropped.jpg" alt="" onclick="changeimage(this.src)">
<img src="https://i.ibb.co/0GwkygJ/imagename-2.png" alt="" onclick="changeimage(this.src)">
</div>
</div>Thanks and best regards!