Product Image Gallery with Thumbnails

Question

please if any one can help me with this i have a problem that when i click on Thumbnails image to get it appear in large div the result become that the last one only appear even i click in any one else

   var bigImg = document.querySelector(".bigimg");                          
                            var thumbImg = document.querySelectorAll('.Thumbimg');                                                 
                            for ( var i = 0; i < thumbImg.length; i++) { 
                                var thumbImgAtt = thumbImg[i].getAttribute("src");   
                                thumbImg[i].addEventListener("click", function(){
                                bigImg.setAttribute('src', thumbImgAtt);
                                })   
                            }

.bigimg {
width:250px
}

.Thumbimg {
width:100px; display:inlineblock;
}

Mohammed Joraid · Accepted Answer

I just changed one line of your js code. I moved the line where you get the Image Attribute.

In your script, you get the attribute of the image during a for loop and then use it in binding the event.

  var thumbImgAtt = thumbImg[i].getAttribute("src");

I suspected that the variable store the last value always. Therefore, I did two things: 1- I moved this line inside the on addEventListenerbinding 2- I used this to access the current element you are looping through instead of accessing the array.

I think by capturing the value of attr before binding will cause the value of the image src to be static. However, by getting the value during the binding event, you will make sure to get the clicked item attr value.

Binding is a dynamic process. What you did is you capture the value of the attr before binding, hence, you get a static string. Then during binding, you decided to assign the static string to the big div. You should not capture the value of an element outside the binding. E.g. what if other script change source?

Anyone else provides a better explanation is welcome.

Here is a sample of the working code.

var bigImg = document.querySelector(".bigimg");
var thumbImg = document.querySelectorAll('.Thumbimg');


for (var i = 0; i < thumbImg.length; i++) {
   //I just changed where you get access to the src of image
   // var thumbImgAtt = thumbImg[i].getAttribute("src");  
  
  thumbImg[i].addEventListener("click", function() {
    //Get the attributes here from 'this'
    let thumbImgAtt = this.getAttribute("src");
    bigImg.setAttribute('src', thumbImgAtt );
  });
}

.bigimg {
  width: 250px
}

.Thumbimg {
  width: 100px;
  display: inlineblock;
}

Product Image Gallery with Thumbnails

Answers (1)

Related Questions