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

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 >
          <img
            src="https://source.unsplash.com/400x400/?stationery"
            
          />
          <div >
            <img
              src="https://source.unsplash.com/100x100/?pen"
              
            />
            <img
              src="https://source.unsplash.com/100x100/?pencil"
              
            />
            <img
              src="https://source.unsplash.com/100x100/?notepad"
              
            />
            <img
              src="https://source.unsplash.com/100x100/?eraser"
              
            />
          </div>
        </div>
        
        <div >
          <h1>Product Name</h1>
          <p>Product description goes here two line product description</p>
          <h3>Color</h3>
          <div >
            <img src="color-swatch.svg"  />
            <img src="color-swatch.svg"  />
            <img src="color-swatch.svg"  />
            <img src="color-swatch.svg"  />
           
          </div>
          <h3>Quantity</h3>
          <div >
            <!-- <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 >Add to Cart</button>
        </div>

CodePudding user response：

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

CodePudding user response：

En basit çözüm bu ama image https://source.unsplash.com/100x100/?eraser != https://source.unsplash.com/400x400/?eraser o yüzden farklı görsel çekiyor. aynı görsel için ; function changeColor(i){ document.querySelector(".main-image").setAttribute("src",smallImg[i].getAttribute("src"));
}

Bunun ile birlikte .main-image{width:400px;height:400px;} verirsen aynı görseli çeker.

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(i){
  
 var src=smallImg[i].getAttribute("src");
 var a=src.replace(/100/g,"400");
  document.querySelector(".main-image").setAttribute("src",a);
    
  
}

<div >
          <img
            src="https://source.unsplash.com/400x400/?stationery"
            
          />
          <div >
             <img
              src="https://source.unsplash.com/100x100/?eraser"
               onclick="changeColor(i=0);"
            />
            <img
              src="https://source.unsplash.com/100x100/?pen"
               onclick="changeColor(i=1);"
            />
            <img
              src="https://source.unsplash.com/100x100/?pencil"
               onclick="changeColor(i=2);"
            />
            <img
              src="https://source.unsplash.com/100x100/?notepad"
               onclick="changeColor(i=3);"
            />
          
          </div>
        </div>