Image ↓
I implemented image replacement using JavaScript!
Procedure
It's too rough, haha. I'll actually write it and explain it.
<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.
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.
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.
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 ~~
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 ☆
Recommended Posts