He creado una galería que supone cambiar la imagen principal cuando se elige otra del menú pequeño de abajo, sin embargo, no reacciona cuando hago clic en otras fotos pequeñas, simplemente permanece igual, ¿alguien podría ayudarme?
// 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>¡Prueba esto!
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>¡Gracias y un saludo!