1 00:00:00,150 --> 00:00:06,270 All right, so we have three components that we need to tackle, and I think it just makes the most 2 00:00:06,270 --> 00:00:08,070 sense to start with images. 3 00:00:08,550 --> 00:00:12,180 And essentially what we're looking for is a one man image. 4 00:00:12,690 --> 00:00:16,170 And then we have a bunch of images that we can click on. 5 00:00:16,500 --> 00:00:21,180 And then, of course, once we click on an image that becomes that main image. 6 00:00:21,510 --> 00:00:29,100 Now, I have to be honest, in order to save a little bit of time for all the products, these extra 7 00:00:29,100 --> 00:00:31,650 images are exactly the same. 8 00:00:32,010 --> 00:00:36,600 So, of course, when we talk about that main image, each product has the unique one. 9 00:00:36,930 --> 00:00:44,190 But when we talk about those extra images that I would want to only display on a single product page, 10 00:00:44,490 --> 00:00:51,420 of course there will be all the same since I thought that adding some unique images for every product 11 00:00:51,690 --> 00:00:55,140 is just going to be a bit too time consuming. 12 00:00:55,620 --> 00:00:59,720 So we're going to navigate right now to the product images. 13 00:00:59,730 --> 00:01:05,000 But one thing that this component is looking for is the images array. 14 00:01:05,610 --> 00:01:06,930 So we need to pass it in. 15 00:01:07,230 --> 00:01:11,400 And of course, we can call it images that also make sense. 16 00:01:11,730 --> 00:01:18,870 And I'll just say that, yep, we're passing in images pop into the product images. 17 00:01:19,200 --> 00:01:25,330 So now, of course, we can navigate when we have the product images and let's think about it. 18 00:01:25,620 --> 00:01:27,780 I mean, we have done this already quite a few times. 19 00:01:28,080 --> 00:01:33,090 I should be some kind of use state variable that has that main image. 20 00:01:33,420 --> 00:01:34,850 And we can use the index. 21 00:01:34,860 --> 00:01:40,740 We can say, yeah, first I would want to display the first image and then as I'm clicking, of course, 22 00:01:40,740 --> 00:01:42,540 I'll change that state index. 23 00:01:42,930 --> 00:01:49,140 And as I'm changing that index, of course, the value in the main one will also change. 24 00:01:49,410 --> 00:01:51,990 So first, I'm just going to get the images out. 25 00:01:52,290 --> 00:01:59,390 And just so I can see that there's no trickery in there, I'm going to go with log and images. 26 00:01:59,460 --> 00:02:06,180 Now, we'll have to do a little bit of more functionality in here, and I'll talk about it when we get 27 00:02:06,180 --> 00:02:06,410 there. 28 00:02:06,840 --> 00:02:07,890 So I'm going to go here. 29 00:02:08,040 --> 00:02:14,920 Notice in the beginning it is undefined and then it is an array of five items. 30 00:02:15,270 --> 00:02:20,790 So now what I would want is to set up some kind of use state variable. 31 00:02:20,980 --> 00:02:24,450 By the way, this just imported the icon that I wasn't looking for, so. 32 00:02:25,220 --> 00:02:30,980 I have the U.S. state and I would want to set up that main image, and again, this is something we 33 00:02:30,980 --> 00:02:33,380 have done already in the earlier projects. 34 00:02:33,770 --> 00:02:35,870 So I'm going to go with Consed and then mind. 35 00:02:35,880 --> 00:02:37,460 So that is going to be my main image. 36 00:02:38,090 --> 00:02:42,350 That's the one that I'm going to display as a bigger image. 37 00:02:42,710 --> 00:02:46,150 And by default, it's going to be the first image in my. 38 00:02:46,160 --> 00:02:46,560 All right. 39 00:02:47,030 --> 00:02:50,120 So here we go with the function set man. 40 00:02:50,270 --> 00:02:59,580 And that one will be equal to use, use and state and will pass in the images that we're getting back. 41 00:02:59,900 --> 00:03:03,320 And like I said, I would want to start with zero. 42 00:03:03,680 --> 00:03:04,040 Correct. 43 00:03:04,310 --> 00:03:06,050 Since I would want to display the first image. 44 00:03:06,450 --> 00:03:14,040 Now, there's going to be a bit of a gotcha where I remember initially that value was undefined. 45 00:03:14,660 --> 00:03:19,130 I mean, if you don't remember, then again, we will need to go back and comment this out. 46 00:03:19,490 --> 00:03:24,770 But initially this was undefined and only then we managed to get the. 47 00:03:24,770 --> 00:03:25,130 All right. 48 00:03:25,610 --> 00:03:33,260 So the problem here is that I'm setting up my item, the main one, to be equal to the first item in 49 00:03:33,560 --> 00:03:33,860 array. 50 00:03:34,280 --> 00:03:34,750 Correct. 51 00:03:35,150 --> 00:03:38,350 But initially, images is undefined. 52 00:03:38,360 --> 00:03:43,240 Remember, it was undefined and only then we had our array. 53 00:03:43,790 --> 00:03:51,230 So I would want to use the S6 default parameters where I'm going to say if the images is undefined, 54 00:03:51,500 --> 00:03:53,210 that is just going to be an empty. 55 00:03:53,210 --> 00:03:53,570 All right. 56 00:03:54,050 --> 00:03:57,440 So once we save that, we're not getting this error. 57 00:03:57,770 --> 00:04:00,290 So initially it is just going to be empty. 58 00:04:00,320 --> 00:04:00,580 Right. 59 00:04:00,600 --> 00:04:03,550 And then eventually, of course, we will get our images. 60 00:04:03,890 --> 00:04:04,730 So that's a start. 61 00:04:04,940 --> 00:04:08,330 And then remember, this is going to be our first image. 62 00:04:08,540 --> 00:04:13,430 So if you want to console the main, that should be the object. 63 00:04:13,760 --> 00:04:15,510 Now in the object, what we're looking for. 64 00:04:15,710 --> 00:04:20,330 Well, it's going to be DRL this is where the image is sitting. 65 00:04:20,720 --> 00:04:22,310 So there's a bunch of other info. 66 00:04:22,550 --> 00:04:30,470 But what we're looking for is this Eora and the way we'll set up our turn is in the following way. 67 00:04:30,740 --> 00:04:34,070 So I'm going to go with the wrapper and then there's going to be two things. 68 00:04:34,490 --> 00:04:42,290 There's going to be that main image and then the div, so the gallery where I'll display all the images. 69 00:04:42,350 --> 00:04:44,780 So we're going to go here with HMG. 70 00:04:45,200 --> 00:04:48,770 And then as far as the source, we're going to go with Main and then Yoro. 71 00:04:49,310 --> 00:04:52,280 So that's going to be the main property. 72 00:04:52,490 --> 00:04:57,650 And remember, on that object, the property we're looking for was euro. 73 00:04:58,070 --> 00:05:05,810 And as far as the name, well, I'm just going to go with some kind of main image, like, OK, that's 74 00:05:05,810 --> 00:05:06,970 going to be the alternative. 75 00:05:06,980 --> 00:05:13,040 And then, like I said, I would also want to have my gallery now for the time being, I just say I'm 76 00:05:13,040 --> 00:05:16,190 not see whether we're going to get that main image. 77 00:05:16,190 --> 00:05:19,600 And then once we say course, we have one more error. 78 00:05:19,760 --> 00:05:20,730 So why is that happening? 79 00:05:21,200 --> 00:05:28,770 Well, now, not only I'm getting the first item, but then from that first item, I'm looking for the 80 00:05:28,790 --> 00:05:29,230 euro. 81 00:05:29,690 --> 00:05:33,950 So now we will need to update the default value where I'm going to say if. 82 00:05:34,780 --> 00:05:41,740 The images is undefined and there's going to be an camera with empty object, and I'll just say that 83 00:05:41,740 --> 00:05:43,340 you are all to be empty string. 84 00:05:43,570 --> 00:05:48,220 Again, the only reason why I'm doing that, because initially images is undefined. 85 00:05:48,220 --> 00:05:55,570 And in here I'm going right away and checking for a property on the object that is actually undefined. 86 00:05:55,810 --> 00:06:01,330 So once I say we should fix everything and now, of course, we can see the image on this case and I'm 87 00:06:01,330 --> 00:06:05,420 going to go to the hundred and that's how our image is going to look like. 88 00:06:05,710 --> 00:06:08,470 Now, I do want to add a class name for styling. 89 00:06:09,610 --> 00:06:16,300 So we're going to go here with a main source and of course, our image is going to be smaller, and 90 00:06:16,300 --> 00:06:18,180 after that I would want to set up my gallery. 91 00:06:18,190 --> 00:06:25,800 So there's going to be a div with class gallery show and I'm going to iterate over my images. 92 00:06:25,810 --> 00:06:29,290 So we're going to see a map here and we're iterating over. 93 00:06:29,500 --> 00:06:34,110 And of course for every image or turn a smaller one. 94 00:06:34,480 --> 00:06:34,890 Correct. 95 00:06:35,350 --> 00:06:39,310 So every item is going to be represented by the name of image. 96 00:06:39,550 --> 00:06:46,090 And I also would want to get the index because that's how we will control the state over here, because 97 00:06:46,090 --> 00:06:50,060 each image has the index and by default, I'm showing the first one. 98 00:06:50,290 --> 00:06:51,660 That's why I went with zero. 99 00:06:52,000 --> 00:06:58,140 But then as I'm clicking on that image, of course I'll change this value in the state. 100 00:06:58,510 --> 00:06:59,950 So I'm going to go with a return. 101 00:07:00,310 --> 00:07:02,410 I'm returning for now. 102 00:07:02,410 --> 00:07:06,910 Just use the source here and we'll set up image. 103 00:07:07,210 --> 00:07:08,710 So that's going to be my object. 104 00:07:08,950 --> 00:07:13,660 So each and every image has that property and then, of course, we'll save it. 105 00:07:13,960 --> 00:07:18,040 Now there's going to be some errors, the warning meaning some warnings, because we didn't set up the 106 00:07:18,040 --> 00:07:18,340 key. 107 00:07:19,090 --> 00:07:23,900 But the important part is that, of course, we can see the images now. 108 00:07:23,920 --> 00:07:26,590 At the moment, nothing is happening, but at least we have two things. 109 00:07:27,070 --> 00:07:31,830 We have, of course, the main image as well as the gallery of images. 110 00:07:31,840 --> 00:07:40,060 And then again, the main image we get by getting the first item from the array and then using the euro 111 00:07:40,060 --> 00:07:42,880 property, since that's where the image is setting. 112 00:07:43,270 --> 00:07:46,030 And what few things I would need to add. 113 00:07:46,210 --> 00:07:48,100 And as far as the alternative, you know what? 114 00:07:48,130 --> 00:07:53,170 Let me just check what was in the main, what was in the object, what I want to double check. 115 00:07:53,180 --> 00:07:58,810 So initially, notice, we just have this dummy value for the euro, but then eventually, of course, 116 00:07:58,810 --> 00:08:00,190 we have all of these ones. 117 00:08:00,520 --> 00:08:03,750 And I think I can just use the filename for the alternative. 118 00:08:04,210 --> 00:08:08,090 So I'm going to go back and we're going to go for alternative. 119 00:08:08,110 --> 00:08:11,380 We're going to use a marriage and then file name. 120 00:08:11,950 --> 00:08:17,670 Ma'am, hopefully the property is exactly the same filename. 121 00:08:18,100 --> 00:08:21,070 And then also we would need to have a key. 122 00:08:21,310 --> 00:08:23,550 Remember, we have a list, of course, in this case. 123 00:08:23,830 --> 00:08:27,070 So I'm going to set this equal to the index. 124 00:08:27,490 --> 00:08:34,150 And then once I click on the images now, of course, I would want to change that index. 125 00:08:34,400 --> 00:08:34,830 All right. 126 00:08:35,140 --> 00:08:42,820 So once I change it, then, of course, this image, the one that I have clicked on, will become that 127 00:08:43,060 --> 00:08:43,870 main one. 128 00:08:44,320 --> 00:08:48,520 So in the beginning, I'm just looking for this image, the first one. 129 00:08:48,820 --> 00:08:53,500 But then, of course, I can pass in this one, the one that I'm clicking on. 130 00:08:53,830 --> 00:08:56,560 And the way we do that, we go with on Click. 131 00:08:57,010 --> 00:09:00,220 And now it set up our our function. 132 00:09:00,670 --> 00:09:07,810 And once we click on it, we'll say set mine and we just change that image so we change the object. 133 00:09:07,990 --> 00:09:12,130 Initially, we set up our main image to be our first one. 134 00:09:12,610 --> 00:09:14,890 Now I'm just going to say images. 135 00:09:15,430 --> 00:09:21,710 So that's mirror and then whatever is the index of this particular image. 136 00:09:22,150 --> 00:09:23,290 So this is one. 137 00:09:23,720 --> 00:09:32,440 And of course, I will set the image which has the index of one to be my main one and I'll save it. 138 00:09:32,440 --> 00:09:35,560 And I think I can remove the control log and notice. 139 00:09:35,560 --> 00:09:37,090 How can I click click on images. 140 00:09:37,090 --> 00:09:39,910 And then of course I'm changing that main one. 141 00:09:40,120 --> 00:09:43,810 And then the last thing that I would want to add is the active class. 142 00:09:44,140 --> 00:09:51,100 Notice how when I'm clicking on these images, I'm adding a little blur around these images. 143 00:09:51,430 --> 00:09:56,380 So that just signals that that is the main image that I'm displaying. 144 00:09:56,800 --> 00:10:04,600 And the way we can set that up is simply checking whether the image URL matches the URL that is coming 145 00:10:04,840 --> 00:10:05,620 from the main. 146 00:10:06,280 --> 00:10:10,780 If that is the case, then I know that of course, this is the image that I'm displaying. 147 00:10:11,140 --> 00:10:13,860 So in here, let's go with class name again. 148 00:10:13,870 --> 00:10:17,230 We'll set up our expression since we need to use a template literal. 149 00:10:17,620 --> 00:10:25,360 And I'm just going to check if the image Yoro, the one that is coming from this particular item, matches 150 00:10:25,360 --> 00:10:27,310 to the Manero what that means. 151 00:10:27,320 --> 00:10:30,610 Well, that means that image, of course, is the main one right now. 152 00:10:30,940 --> 00:10:32,860 So it can set up our tearing operator. 153 00:10:33,070 --> 00:10:35,920 And if that is the case, I would want to have the active class. 154 00:10:36,280 --> 00:10:42,430 If not, then I'm just going to add more and what you'll notice and whether we're here should have spelled 155 00:10:42,430 --> 00:10:43,210 this correctly. 156 00:10:44,110 --> 00:10:51,100 We have the now and there it is now, first image, of course, has this active class because this is 157 00:10:51,100 --> 00:10:52,450 how we set it up over here. 158 00:10:52,840 --> 00:10:57,610 And every time I click, I change that main YORO. 159 00:10:57,910 --> 00:11:04,110 And as I'm changing that value, well, I'm also getting that a nice ball all around. 160 00:11:04,480 --> 00:11:10,390 And before we go over the functionality one more time, let me just fix here the access issue and I'm 161 00:11:10,390 --> 00:11:11,650 going to go back to single product. 162 00:11:11,650 --> 00:11:16,060 And I think the problem is here, but it is not products. 163 00:11:16,060 --> 00:11:19,750 It is products enter and now we should get a nice distance. 164 00:11:19,760 --> 00:11:22,900 And of course, now we have it and one more time. 165 00:11:23,290 --> 00:11:30,250 So we have a right of images that we pass into the product images component then. 166 00:11:31,240 --> 00:11:38,050 In the product images, we structure it, and since I would want to have some kind of main image, I 167 00:11:38,050 --> 00:11:40,090 set up the use state. 168 00:11:40,360 --> 00:11:47,830 So I set up the state power and by default, I set my first image to be equal to that main image. 169 00:11:48,220 --> 00:11:50,920 Now, the problem is going to be that initially it is undefined. 170 00:11:50,920 --> 00:11:53,220 That's why we set up default primers. 171 00:11:53,380 --> 00:11:59,970 So if it is undefined, I just say that it is going to be an array with one object with the Yarnold 172 00:11:59,980 --> 00:12:03,230 property, because in here, of course, we're accessing the real problem. 173 00:12:03,550 --> 00:12:08,980 But I have one image and then I have the gallery of images so that one image is going to be the main 174 00:12:08,980 --> 00:12:11,500 image, whatever it is, initially at its first one. 175 00:12:11,710 --> 00:12:13,300 And then, of course, we're turning that. 176 00:12:13,510 --> 00:12:16,090 We add a little bit of sensors and then we have the gallery. 177 00:12:16,390 --> 00:12:22,150 We iterate over all the images we have in there and it is an object. 178 00:12:22,420 --> 00:12:26,830 And then each object has the URL property but points to the image. 179 00:12:26,850 --> 00:12:28,140 That's why we can display them. 180 00:12:28,600 --> 00:12:35,340 And since I would want to add something for alterative, I have the filename and also I need the index. 181 00:12:35,650 --> 00:12:44,830 And then once I click on the image, I use my set mind function and I just pass in the image by accessing 182 00:12:44,830 --> 00:12:49,000 the array and then passing whatever is the index of that image. 183 00:12:49,240 --> 00:12:52,740 So now once I click on it, it becomes that main image. 184 00:12:53,110 --> 00:12:58,660 And then lastly, since I would want to showcase, well, which image I'm actually displaying, I just 185 00:12:58,660 --> 00:13:00,250 add a nice boat around. 186 00:13:00,460 --> 00:13:07,340 And I do that by conditionally checking if the image URL matches to the want of Manero that I know that 187 00:13:07,540 --> 00:13:08,290 that's the image. 188 00:13:08,470 --> 00:13:10,940 And then we just have this class of active. 189 00:13:10,940 --> 00:13:13,510 If not, we have class of No.