1
00:00:01,310 --> 00:00:06,310
So now what I'm going to do is that I'm going to display the other images.

2
00:00:06,320 --> 00:00:12,560
If the user clicks on one of these images, we want to replace this image with one of these images so

3
00:00:12,560 --> 00:00:17,750
that the user will be able to check each single image of these images.

4
00:00:18,290 --> 00:00:24,670
So, for example, if I click on this black bag, I want it to be displayed here instead of this shirt.

5
00:00:25,310 --> 00:00:26,690
So how can we do this?

6
00:00:27,140 --> 00:00:29,390
To do this, we need to use JavaScript.

7
00:00:29,810 --> 00:00:33,200
So first we need to give this image an I.D..

8
00:00:34,010 --> 00:00:38,450
So remember, this image exists here in this single product section.

9
00:00:39,290 --> 00:00:40,070
This image.

10
00:00:41,090 --> 00:00:41,840
This image.

11
00:00:42,290 --> 00:00:44,180
So this image, we need to give it an I.D..

12
00:00:44,180 --> 00:00:48,350
I'm going to say I.D. and then I'm going to see main image.

13
00:00:49,870 --> 00:00:50,500
Main.

14
00:00:51,920 --> 00:00:52,460
Image.

15
00:00:54,100 --> 00:00:55,630
And we need to use JavaScript.

16
00:00:55,960 --> 00:01:00,190
So I'm going to scroll to the bottom and you'll be launching a script.

17
00:01:00,790 --> 00:01:02,740
I'm going to create a script.

18
00:01:02,750 --> 00:01:03,820
I'm going to say your script.

19
00:01:06,180 --> 00:01:08,400
And I'm going to close the script.

20
00:01:10,240 --> 00:01:13,600
And now we need to access the image.

21
00:01:13,600 --> 00:01:15,730
Just to access the image, we need to say.

22
00:01:17,420 --> 00:01:20,340
Document that.

23
00:01:20,360 --> 00:01:21,500
Get eliminated by it.

24
00:01:22,790 --> 00:01:24,440
And then we tried that.

25
00:01:24,440 --> 00:01:26,120
We used this.

26
00:01:26,170 --> 00:01:28,370
I remember the idea that they just

27
00:01:30,800 --> 00:01:37,940
I have just given the the image wise, this main image.

28
00:01:39,050 --> 00:01:40,280
So I'm going to say here.

29
00:01:41,940 --> 00:01:49,650
I'm going to say here, document that gets eliminated by Haiti and then main image and we need to store

30
00:01:49,650 --> 00:01:53,010
this in a valuable I'm going to say here our main.

31
00:01:54,610 --> 00:02:01,930
Image is equal to a document that get element by ID and then main image.

32
00:02:02,650 --> 00:02:11,260
Now what we need to do is that we need to replace the alpha, the, this main image with one of these,

33
00:02:11,260 --> 00:02:13,660
these images upon clicking on one of these images.

34
00:02:14,200 --> 00:02:17,770
Therefore, we need to get, we need to make reference to these images.

35
00:02:18,520 --> 00:02:24,790
So in order to make reference to these images, we need to use the document get element by me.

36
00:02:25,600 --> 00:02:28,300
So I'm going to say here, document that.

37
00:02:28,300 --> 00:02:31,420
Get element by class name.

38
00:02:33,740 --> 00:02:41,890
And then the glass B class of these images, which is the what is the class that is common among the

39
00:02:41,930 --> 00:02:44,540
cell images, remember?

40
00:02:45,880 --> 00:02:55,420
The class, war of the class that you are that all of these images have is the small image column and

41
00:02:55,420 --> 00:02:57,000
also the small image.

42
00:02:57,010 --> 00:02:58,420
So we need to use the small image.

43
00:02:58,420 --> 00:03:01,450
We need to use this small image class.

44
00:03:02,320 --> 00:03:04,210
So let's use it here.

45
00:03:04,210 --> 00:03:07,390
I'm going to say get to my class name.

46
00:03:07,930 --> 00:03:10,750
And the class name that I'm going to be using is this small.

47
00:03:13,270 --> 00:03:13,870
Image.

48
00:03:16,630 --> 00:03:21,820
And then I'm going to store this in a valuable I'm going to save our small image.

49
00:03:27,950 --> 00:03:33,920
Now we need to say we need to use JavaScript to replace this with this.

50
00:03:34,490 --> 00:03:35,450
In other words.

51
00:03:37,180 --> 00:03:42,520
We need to replace this image, one of these images with we need to replace

52
00:03:45,220 --> 00:03:47,440
this by one of these images.

53
00:03:47,680 --> 00:03:55,300
So I'm going to take this down and add one of these images instead of this one here in this big area.

54
00:03:55,720 --> 00:03:57,550
Upon clicking on one of these images.

55
00:03:58,840 --> 00:04:00,400
In order to do this, we need to add.

56
00:04:01,120 --> 00:04:01,740
We need to add.

57
00:04:01,990 --> 00:04:05,580
Click on click event to the small image.

58
00:04:05,590 --> 00:04:07,960
So I'm going to see a small image here.

59
00:04:07,960 --> 00:04:13,090
I'm going to say small image, dot on click on click click.

60
00:04:13,090 --> 00:04:18,490
If you if user clicks on on one of these images, I'm going to call a function here, I'm going to say

61
00:04:18,490 --> 00:04:27,940
function and this function is going to replace the small image with the the is going to take the main

62
00:04:27,940 --> 00:04:29,890
image down and add this small image.

63
00:04:30,290 --> 00:04:34,990
And instead of it, I'm going to say your function and then I'm going to say main image.

64
00:04:35,830 --> 00:04:36,730
Main image.

65
00:04:36,970 --> 00:04:47,920
That source now is going to be equal to this small image, small image of the first image which has

66
00:04:47,920 --> 00:04:50,980
an index of zero dot source.

67
00:04:52,480 --> 00:04:54,880
So let me walk you through the code one more time.

68
00:04:55,480 --> 00:05:02,770
The first line is going to make reference to the main image, which is this image, the image, this

69
00:05:03,520 --> 00:05:04,330
get element.

70
00:05:04,340 --> 00:05:08,980
My last name, small image will return an array.

71
00:05:08,990 --> 00:05:11,890
This is going to return an array with the small images.

72
00:05:11,890 --> 00:05:13,780
So we have how many images do we have?

73
00:05:14,410 --> 00:05:15,100
We have.

74
00:05:16,150 --> 00:05:17,390
One, two, three, four.

75
00:05:17,410 --> 00:05:18,290
We have four images.

76
00:05:18,320 --> 00:05:24,520
Therefore, this is going to return four images with four indexes one, two, three and four.

77
00:05:25,210 --> 00:05:26,950
So for the first image.

78
00:05:27,910 --> 00:05:30,030
For the first image, the index is zero.

79
00:05:30,040 --> 00:05:32,410
So I'm going to test this with the first image.

80
00:05:32,860 --> 00:05:39,040
This function now is going to listen to clicks on the small image.

81
00:05:39,490 --> 00:05:40,390
So if you.

82
00:05:41,400 --> 00:05:47,250
Actually, I should say the first image which has an index of zero, because I'm testing on the first

83
00:05:47,250 --> 00:05:47,550
image.

84
00:05:47,880 --> 00:05:52,920
So if the user clicks on the first image, if the user clicks on the first image, which is this image,

85
00:05:53,550 --> 00:06:01,590
the first small image, what's going to happen is that the source of the main image will be replaced

86
00:06:01,590 --> 00:06:03,330
with the small image source.

87
00:06:03,960 --> 00:06:05,040
In other one down.

88
00:06:05,460 --> 00:06:09,150
And this image will take the place of this image.

89
00:06:09,720 --> 00:06:12,120
Let me now save and show you how this is going to look.

90
00:06:12,390 --> 00:06:14,470
How this is going to work.

91
00:06:14,490 --> 00:06:14,880
Let me see.

92
00:06:14,880 --> 00:06:16,590
Even now I'm leaving here.

93
00:06:16,590 --> 00:06:18,450
Refresh and left this.

94
00:06:18,780 --> 00:06:25,080
So if I click on this small image, as you can see, it will take the place of the original image,

95
00:06:25,080 --> 00:06:26,490
which is amazing.

96
00:06:28,610 --> 00:06:31,130
Now the problem is with the other images.

97
00:06:31,520 --> 00:06:35,510
If I click on the second image, nothing is going to happen if I click on the third image.

98
00:06:35,840 --> 00:06:38,180
Nothing is going to happen if I click on the fourth image.

99
00:06:38,480 --> 00:06:39,860
Nothing is going to happen.

100
00:06:40,070 --> 00:06:44,060
So we need to apply the same concept to the to all other images.

101
00:06:44,420 --> 00:06:52,880
And to do this, we need to copy this guide pasted here and then here, change this zero with one,

102
00:06:53,270 --> 00:06:56,270
because the second image has an index of one.

103
00:06:56,600 --> 00:06:58,280
So we need to say small image one.

104
00:06:58,290 --> 00:07:00,710
And here we need to say to say small image one.

105
00:07:01,340 --> 00:07:07,240
Now, if I save and if I save and test, let me save on heading over to the browser and test.

106
00:07:07,940 --> 00:07:12,710
And if I click on the second image, it's going to take the place of the original image.

107
00:07:13,220 --> 00:07:16,250
However, if I click on the third image, nothing is going to happen.

108
00:07:16,520 --> 00:07:18,530
So we need to repeat the same exact cut.

109
00:07:18,980 --> 00:07:21,590
And this this is not a good practice.

110
00:07:22,250 --> 00:07:24,980
Therefore, we need to use a four loop.

111
00:07:24,980 --> 00:07:32,720
So instead of repeating the code over and over and over again, here's where our loops come in handy.

112
00:07:33,290 --> 00:07:36,260
So here I'm going to say four.

113
00:07:36,980 --> 00:07:38,270
And then let's.

114
00:07:39,590 --> 00:07:51,380
Let a eye is equal to zero and then eye is smaller than four because we have four images and then eye

115
00:07:51,470 --> 00:07:52,130
less bliss.

116
00:07:53,000 --> 00:07:58,310
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

117
00:07:58,310 --> 00:08:05,660
to base it inside this for loop and and they'll let me push this card.

118
00:08:08,210 --> 00:08:08,840
Now.

119
00:08:09,960 --> 00:08:16,860
Instead of saying small images you we need to say small image I and here we need to say small image.

120
00:08:17,670 --> 00:08:27,300
In other words, as long as I is smaller than four, we will replace this eye with zero point in the

121
00:08:27,300 --> 00:08:28,140
first iteration.

122
00:08:28,530 --> 00:08:31,590
In the second iteration, the AI is going to be one.

123
00:08:31,950 --> 00:08:33,870
In the third iteration, it's going to be two.

124
00:08:34,350 --> 00:08:35,550
And in the fourth.

125
00:08:35,550 --> 00:08:37,860
And last iteration is going to be three.

126
00:08:38,580 --> 00:08:47,610
So this is going to if I say this is going to replace all images and put put one of these images here.

127
00:08:47,790 --> 00:08:49,800
Upon clicking on any of these images.

128
00:08:49,830 --> 00:08:52,830
Let me now refresh this with all images.

129
00:08:53,250 --> 00:08:57,600
So if I click on the first image, it's going to take the place of the original image.

130
00:08:58,020 --> 00:09:02,070
If I click on the second image, it's going to take the place of the original image.

131
00:09:02,520 --> 00:09:06,060
If I click on the third image, it's going to take the place of the original image.

132
00:09:06,420 --> 00:09:11,760
And of course, if I click on the last image, it's going to take the place of the original image.

133
00:09:12,150 --> 00:09:18,990
So now we are done with this functionality, which is amazing, and it's going to give the user an outstanding

134
00:09:19,230 --> 00:09:20,940
user experience.