1
00:00:00,640 --> 00:00:08,080
He in this section, we're going to be creating an image pop up, so we've got applying JavaScript and

2
00:00:08,080 --> 00:00:13,180
selecting all of the elements that are images, we're going to make them all clickable and have this

3
00:00:13,180 --> 00:00:16,510
model pop up, show up, which is actually going to be a div.

4
00:00:16,510 --> 00:00:21,370
So it's a hidden div and it's going to take the source of the image when you click any of the images

5
00:00:21,370 --> 00:00:26,830
on the page and it's going to show this and highlight it and also darken the rest of the screen.

6
00:00:26,860 --> 00:00:27,790
So let's check this out.

7
00:00:28,510 --> 00:00:33,920
So on the page, we're going to have five images and these are all images if I click on them.

8
00:00:34,330 --> 00:00:38,060
What happens is we get the image being displayed in the pop up.

9
00:00:38,170 --> 00:00:43,710
So using the source from the image on the page, it's going to add it in to the popup window.

10
00:00:43,930 --> 00:00:49,210
That's kind of like a little pop up model that can highlight the images and you can apply this to your

11
00:00:49,210 --> 00:00:51,470
website without any additional coding.

12
00:00:51,490 --> 00:00:57,070
It's all done with JavaScript, where it takes the image path that gets clicked and then outputs it

13
00:00:57,070 --> 00:00:58,340
within the Pop-Up window.