1
00:00:00,210 --> 00:00:06,570
Congratulations on finishing this section of the course where we built out a fully functional image

2
00:00:06,570 --> 00:00:14,130
popup gallery, so you click on an image, it automatically pops up and you can see that image and the

3
00:00:14,130 --> 00:00:16,500
image contents within the pop up window.

4
00:00:16,980 --> 00:00:18,540
Let's do a quick code review.

5
00:00:18,660 --> 00:00:21,330
And this application is fully dynamic.

6
00:00:21,350 --> 00:00:28,620
So if we add in more images and I'm going to just add in a few more images and this can be image for

7
00:00:28,620 --> 00:00:30,120
this can be image five.

8
00:00:30,120 --> 00:00:32,040
And I'll pick some random numbers here.

9
00:00:32,630 --> 00:00:37,530
Not sure what colors those are going to be, but as you can see, we're generating out some additional

10
00:00:37,530 --> 00:00:38,100
images.

11
00:00:38,110 --> 00:00:41,480
You click those and they're fully functional within our JavaScript.

12
00:00:41,790 --> 00:00:49,530
So we set up a bunch of scissors in order to have our images look nice and also create the overlay and

13
00:00:49,530 --> 00:00:59,010
the popup window adding in our HTML so that we have our main image gallery area, as well as our popover

14
00:00:59,610 --> 00:01:04,440
window and the structure of the popover window adding in the ability to close those.

15
00:01:05,570 --> 00:01:11,990
Then we used JavaScript to connect to those elements so that we can manipulate them within our code,

16
00:01:12,230 --> 00:01:15,240
so I added them in as JavaScript objects.

17
00:01:15,920 --> 00:01:18,860
We had a node list for images.

18
00:01:18,860 --> 00:01:23,060
As we've got multiple images, we could just have one or we could have more than one.

19
00:01:23,300 --> 00:01:28,340
So we loop through all of the images that are available within the node list, adding event listeners

20
00:01:28,340 --> 00:01:29,660
to each and every one of them.

21
00:01:29,840 --> 00:01:32,600
And the eventless so that we added in was a click event.

22
00:01:32,810 --> 00:01:38,960
And when you click it, then it goes to the function pop image that picks up the source of whatever

23
00:01:39,110 --> 00:01:40,910
element triggered that event.

24
00:01:41,390 --> 00:01:50,600
And we set that new attribute of our source of our Pop-Up window to be equal to the value of the source

25
00:01:50,600 --> 00:01:51,180
of the image.

26
00:01:51,200 --> 00:01:57,200
So whatever one gets clicked, we picked that value up and then we just overwrite the existing one within

27
00:01:57,200 --> 00:02:03,150
the popup window and then we just remove the class of hide, which effectively shows the pop up window.

28
00:02:03,620 --> 00:02:06,320
We needed a way to close these Pop-Up windows.

29
00:02:06,590 --> 00:02:12,440
So we've added in a class of close to several different elements, including the overlay as well as

30
00:02:12,440 --> 00:02:13,190
a close button.

31
00:02:13,310 --> 00:02:14,690
And you could add additional ones.

32
00:02:14,720 --> 00:02:16,220
So this is, again, fully dynamic.

33
00:02:16,410 --> 00:02:21,320
So if you had more close buttons that you want to add and you could add those in as well, and that

34
00:02:21,320 --> 00:02:23,460
would all close the Pop-Up window.

35
00:02:23,630 --> 00:02:25,400
So that's the only function that it's doing.

36
00:02:25,400 --> 00:02:31,490
Adding the event listener, that if you click on an element with a class a close, then what's going

37
00:02:31,490 --> 00:02:39,140
to happen is we're going to add a class of hide to the element show with a class of show, with the

38
00:02:39,140 --> 00:02:43,790
object show with an element which is connected to the element with a class of show.

39
00:02:44,240 --> 00:02:46,670
Thanks again for taking this lesson.

40
00:02:46,790 --> 00:02:54,260
And the core focus of this was using query selector all looping through those elements and then also

41
00:02:54,260 --> 00:03:01,220
adding event listeners to those elements as you iterate through them and then also setting up of attributes

42
00:03:01,370 --> 00:03:05,900
and manipulating, adding and removing classes from elements.