How I do change the BIG image to the thumbnail images when I click the Color Swatches on the right?

Question

How I do change the BIG image to the thumbnail images when I click the Color Swatches on the right? I guess I need to map the thumbnail images to the color swatches? Im hoping to loop through the thumbnail images when i click through the color swatches. so when you click the first color swatch, the BIG image will update to show the FIRST thumbnail and so forth

 let colorSwatch = document.querySelectorAll(".color-swatches"); let smallImg = document.getElementsByClassName("sec"); for(let i= 0; i <colorSwatch.length; i++){ colorSwatch[i].addEventListener("click", changeColor); } function changeColor(){ for (let a = 0; a < smallImg.length; a++){ document.querySelector(".main-image").setAttribute("src",smallImg[a].getAttribute("src")); console.log(a); } }

 <div class="image-container"> <img src="https://source.unsplash.com/400x400/?stationery" class="item main-image" /> <div class="secondary-image"> <img src="https://source.unsplash.com/100x100/?pen" class="item sec item-1 active " /> <img src="https://source.unsplash.com/100x100/?pencil" class="item sec item-2" /> <img src="https://source.unsplash.com/100x100/?notepad" class="item sec item-3" /> <img src="https://source.unsplash.com/100x100/?eraser" class="item sec item-4" /> </div> </div> <div class="product-info"> <h1>Product Name</h1> <p>Product description goes here two line product description</p> <h3>Color</h3> <div class="color-swatches"> <img src="color-swatch.svg" class="swatch color-1" /> <img src="color-swatch.svg" class="swatch color-2" /> <img src="color-swatch.svg" class="swatch color-3" /> <img src="color-swatch.svg" class="swatch color-4" /> </div> <h3>Quantity</h3> <div class="quantity"> <:-- <svg> <ellipse cx="35" cy="35" rx="35" ry="35" /> </svg> --> <img src="https.//cdn.glitch.global/935c1b3a-2d6f-42b5-aab8-2ea9c89cca70/minus-circle?svg:v=1645435804825" id="minus-icon" /> <h3 id="quantity-value">1</h3> <img src="https.//cdn.glitch.global/935c1b3a-2d6f-42b5-aab8-2ea9c89cca70/plus-circle?svg?v=1645435811670" id="plus-icon" /> </div> <button class="btn-primary add-to-cart-btn">Add to Cart</button> </div>

Answer 1

Look at this line: document.querySelector(".main-image").setAttribute("src",smallImg[a].getAttribute("src")); ...you select the source of your image that has sec as class, this means you get this source: src="https://source.unsplash.com/100x100/?eraser" . So that's the problem, the 100x100 .

As a workaround you can use this CSS style:

img.item.main-image {
    width: 300px;
    height: 300px;
}

...and change the source of your thumbnails like this:

https://source.unsplash.com/300x300/?eraser