How to switch thumbnail images with JavaScript

How to switch thumbnail images using JavaScript

Image ↓

Screenshot from Gyazo

I implemented image replacement using JavaScript!

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.

image.png

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.

image.png

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

How to switch thumbnail images with JavaScript
How to embed JavaScript variables in HTML with Thymeleaf
[rails] How to post images
How to switch Tomcat context.xml with WTP in Eclipse
How to handle uploaded images
How to minimize Java images
How to number (number) with html.erb
How to delete untagged images in bulk with Docker
How to update with activerecord-import
How to get started with slim
How to enclose any character with "~"
How to use mssql-tools with alpine
java Eclipse How to debug javaScript
How to start Camunda with Docker
How to switch Java version with direnv in terminal on Mac
How to crop an image with libGDX
How to adjustTextPosition with iOS Keyboard Extension
How to share files with Docker Toolbox
[Rails] How to upload images using Carrierwave
Convert C language to JavaScript with Emscripten
[Android] How to deal with dark themes
[Note] How to get started with Rspec
How to switch Java versions on Mac
How to do API-based control with cancancan
How to achieve file download with Feign
How to update related models with accepts_nested_attributes_for
How to set JAVA_HOME with Maven appassembler-maven-plugin
How to implement TextInputLayout with validation function
How to handle sign-in errors with devise
How to delete data with foreign key
How to test private scope with JUnit
How to monitor nginx with docker-compose with datadog
How to deal with Precompiling assets failed.
How to switch between multiple Java versions
How to achieve file upload with Feign
How to run Blazor (C #) with Docker
How to build Rails 6 environment with Docker
How to download Oracle JDK 8 rpm with curl
[Java] How to test for null with JUnit
How to mock each case with Mockito 1x
How to mock each case with PowerMock + Mockito1x
How to use MyBatis2 (iBatis) with Spring Boot 1.4 (Spring 4)
How to save to multiple tables with one input
How to test interrupts during Thread.sleep with JUnit
How to use built-in h2db with spring boot
How to play audio and music using javascript
How to use Java framework with AWS Lambda! ??
How to save images on Heroku to S3 on AWS
How to create multiple pull-down menus with ActiveHash
How to use Java API with lambda expression
How to get started with Eclipse Micro Profile
How to give your image to someone with docker
[Rails] How to upload multiple images using Carrierwave
How to insert all at once with MyBatis
[Java] How to switch from open jdk to oracle jdk
How to write test code with Basic authentication
How to build API with GraphQL and Rails
How to use nfs protocol version 2 with ubuntu 18.04
How to get resource files out with spring-boot
How to link images using FactoryBot Active Storage
How to create member variables with JPA Model