How to switch thumbnail images with JavaScript

How to switch thumbnail images using JavaScript

Image ↓

I implemented image replacement using JavaScript!

• Please note that this is just a memorandum.

Procedure

1. Create an HTML file and paste the image of the image
2. Coding with css
3. Write the method when clicking the image in JavaScript

It's too rough, haha. I'll actually write it and explain it.

Write html

<div class="center">
  <div>
  　<img src="img1.jpg " id="bigimg">
  </div>
  <ul>
    <li><img src="thumb-img1.jpg " class="thumb" data-image="img1.jpg "></li>
    <li><img src="thumb-img2.jpg " class="thumb" data-image="img2.jpg "></li>
    <li><img src="thumb-img3.jpg " class="thumb" data-image="img3.jpg "></li>
    <li><img src="thumb-img4.jpg " class="thumb" data-image="img4.jpg "></li>
  </ul>
 </div>

Set the parent element and set the img tag that holds id = "bigimg" directly under it. This will need to be obtained later with getElementById, so add an attribute. Create an ul tag and store the image you want to display in the thumbnail in the list tag. This is where the data-image attribute comes in.

What is the data-image attribute?

Although it is this attribute, the data-image attribute does not exist, and it is the data-'anything' attribute. (Also known as custom data attribute) To put it simply, it looks like this, this time I named it image, but basically anything is fine.

Reasons to use the data- * attribute

It is used to embed data in HTML tags and read or rewrite its values from Javascript. I will call this data-image attribute later with a JavaScript method, so I will write it down.

Coding with CSS

I thought it would be okay to omit this separately, but I will code it with CSS to make it look like that.

section img{
  max-width: 100%;
}
.center{
  margin: 0 auto 0 auto;
  max-width: 90%;
  width: 500px;
}
.center ul{
  display: flex;
  margin: 0;
  padding: 0;
  list-style: none;
}
.center li{
  flex: 1 1 auto;
  margin-right: 8px;
}
li:last-of-type{
  margin-right: 0;
}

I will omit the explanation here, but it looks like the following.

Of course, clicking on the image here does nothing. ~~ The birds are just in parentheses ~~

Write JavaScript

Now the main subject is from here. I will write JavaScript.

const thumbs = document.querySelectorAll('.thumb');
 //css selector'.thub'And assign it to the constant thumbs
 console.log(thumbs);  //Make sure that the value is stored in the console once.

It's okay if the images are stored in an array like this. I'm getting the .thumb of the css selector with the querySeleAll method.

const thumbs = document.querySelectorAll('.thumb');
  // console.log(thumbs);
thumbs.forEach(function(item,index){
 item.onclick = function(){
  document.geElementById('bigimg').src = this.dataset.image;
 }
});

There is a function in thubs.forEach and there is a parameter (item, index) in the function. The item is the img element confirmed on the console earlier, and the index is the array number. What is being cut back is that when the item.click event fires, the document.getElementById on the last line gets the'bigimg'id and replaces the src attribute with the data-image attribute described in HTML first. Replaced with the data- * attribute in this.dataset.image.

With this, when the click event fires, data-image will be entered at'bigimg'and the thumbnail of bigimg will be changed.

Obtained element.attribute=value;

 This time


#### **`document.geElementById('bigimg').src = this.dataset.image;`**

This is the part.

It was a little difficult to explain towards the end, but it looks like this. Put the completed source code and finish!

const thumbs = document.querySelectorAll('.thumb');
  // console.log(thumbs);
  thumbs.forEach(function(item,index){
    item.onclick = function(){
      document.getElementById('bigimg').src = this.dataset.image;
    }
  });

<div class="center">
    <div>
      <img src="img1.jpg " id="bigimg">
    </div>
    <ul>
      <li><img src="thumb-img1.jpg " class="thumb" data-image="img1.jpg "></li>
      <li><img src="thumb-img2.jpg " class="thumb" data-image="img2.jpg "></li>
      <li><img src="thumb-img3.jpg " class="thumb" data-image="img3.jpg "></li>
      <li><img src="thumb-img4.jpg " class="thumb" data-image="img4.jpg "></li>
    </ul>
  </div>

that's all! If you have any concerns, please leave a comment. : Kissing_closed_eyes: chu ☆