So now what I'm going to do is that I'm going to display the other images.
If the user clicks on one of these images, we want to replace this image with one of these images so
that the user will be able to check each single image of these images.
So, for example, if I click on this black bag, I want it to be displayed here instead of this shirt.
So how can we do this?
To do this, we need to use JavaScript.
So first we need to give this image an I.D..
So remember, this image exists here in this single product section.
This image.
So this image, we need to give it an I.D..
I'm going to say I.D. and then I'm going to see main image.
Main.
Image.
And we need to use JavaScript.
So I'm going to scroll to the bottom and you'll be launching a script.
I'm going to create a script.
I'm going to say your script.
And I'm going to close the script.
And now we need to access the image.
Just to access the image, we need to say.
Document that.
Get eliminated by it.
And then we tried that.
We used this.
I remember the idea that they just
I have just given the the image wise, this main image.
So I'm going to say here.
I'm going to say here, document that gets eliminated by Haiti and then main image and we need to store
this in a valuable I'm going to say here our main.
Image is equal to a document that get element by ID and then main image.
Now what we need to do is that we need to replace the alpha, the, this main image with one of these,
these images upon clicking on one of these images.
Therefore, we need to get, we need to make reference to these images.
So in order to make reference to these images, we need to use the document get element by me.
So I'm going to say here, document that.
Get element by class name.
And then the glass B class of these images, which is the what is the class that is common among the
cell images, remember?
The class, war of the class that you are that all of these images have is the small image column and
also the small image.
So we need to use the small image.
We need to use this small image class.
So let's use it here.
I'm going to say get to my class name.
And the class name that I'm going to be using is this small.
Image.
And then I'm going to store this in a valuable I'm going to save our small image.
Now we need to say we need to use JavaScript to replace this with this.
In other words.
We need to replace this image, one of these images with we need to replace
this by one of these images.
So I'm going to take this down and add one of these images instead of this one here in this big area.
Upon clicking on one of these images.
In order to do this, we need to add.
We need to add.
Click on click event to the small image.
So I'm going to see a small image here.
I'm going to say small image, dot on click on click click.
If you if user clicks on on one of these images, I'm going to call a function here, I'm going to say
function and this function is going to replace the small image with the the is going to take the main
image down and add this small image.
And instead of it, I'm going to say your function and then I'm going to say main image.
Main image.
That source now is going to be equal to this small image, small image of the first image which has
an index of zero dot source.
So let me walk you through the code one more time.
The first line is going to make reference to the main image, which is this image, the image, this
get element.
My last name, small image will return an array.
This is going to return an array with the small images.
So we have how many images do we have?
We have.
One, two, three, four.
We have four images.
Therefore, this is going to return four images with four indexes one, two, three and four.
So for the first image.
For the first image, the index is zero.
So I'm going to test this with the first image.
This function now is going to listen to clicks on the small image.
So if you.
Actually, I should say the first image which has an index of zero, because I'm testing on the first
image.
So if the user clicks on the first image, if the user clicks on the first image, which is this image,
the first small image, what's going to happen is that the source of the main image will be replaced
with the small image source.
In other one down.
And this image will take the place of this image.
Let me now save and show you how this is going to look.
How this is going to work.
Let me see.
Even now I'm leaving here.
Refresh and left this.
So if I click on this small image, as you can see, it will take the place of the original image,
which is amazing.
Now the problem is with the other images.
If I click on the second image, nothing is going to happen if I click on the third image.
Nothing is going to happen if I click on the fourth image.
Nothing is going to happen.
So we need to apply the same concept to the to all other images.
And to do this, we need to copy this guide pasted here and then here, change this zero with one,
because the second image has an index of one.
So we need to say small image one.
And here we need to say to say small image one.
Now, if I save and if I save and test, let me save on heading over to the browser and test.
And if I click on the second image, it's going to take the place of the original image.
However, if I click on the third image, nothing is going to happen.
So we need to repeat the same exact cut.
And this this is not a good practice.
Therefore, we need to use a four loop.
So instead of repeating the code over and over and over again, here's where our loops come in handy.
So here I'm going to say four.
And then let's.
Let a eye is equal to zero and then eye is smaller than four because we have four images and then eye
less bliss.
And then inside this loop, what I'm going to do is that I'm going to copy this guide and then I'm going
to base it inside this for loop and and they'll let me push this card.
Now.
Instead of saying small images you we need to say small image I and here we need to say small image.
In other words, as long as I is smaller than four, we will replace this eye with zero point in the
first iteration.
In the second iteration, the AI is going to be one.
In the third iteration, it's going to be two.
And in the fourth.
And last iteration is going to be three.
So this is going to if I say this is going to replace all images and put put one of these images here.
Upon clicking on any of these images.
Let me now refresh this with all images.
So if I click on the first image, it's going to take the place of the original image.
If I click on the second image, it's going to take the place of the original image.
If I click on the third image, it's going to take the place of the original image.
And of course, if I click on the last image, it's going to take the place of the original image.
So now we are done with this functionality, which is amazing, and it's going to give the user an outstanding
user experience.