1
00:00:00,330 --> 00:00:06,660
In this lesson, we're going to be creating an image Pop-Up window, so selecting an image on our page

2
00:00:06,660 --> 00:00:09,480
is going to pop it up in a larger viewing area.

3
00:00:09,720 --> 00:00:11,880
So, first of all, we need some images.

4
00:00:12,030 --> 00:00:15,910
And the images that we're going to be use are coming from placeholder dotcom.

5
00:00:16,170 --> 00:00:22,020
So it gives you the ability to add placeholder images, not really fancy, just very plain.

6
00:00:22,200 --> 00:00:28,290
They give you the ability to create these very grayscale kind of generated images and you can also color

7
00:00:28,290 --> 00:00:30,280
them up and add in some text to them.

8
00:00:30,660 --> 00:00:31,770
So let's set those up.

9
00:00:32,100 --> 00:00:35,210
And first of all, we need a div that's going to contain all of those.

10
00:00:35,220 --> 00:00:41,530
We can we can call this div, give it a class of pop, and then inside let's add in our image.

11
00:00:41,940 --> 00:00:44,340
So just using our image tag.

12
00:00:44,670 --> 00:00:46,920
So we need to specify an image source.

13
00:00:47,220 --> 00:00:53,190
I'm going to use this one here that I've got create a few more of these and that almost fit on that

14
00:00:53,190 --> 00:00:53,560
line.

15
00:00:53,670 --> 00:00:57,360
So let me add it and you can update the colors of these images.

16
00:00:57,630 --> 00:01:02,700
This is a really useful website because it gives you the ability to kind of just get these placeholder

17
00:01:02,700 --> 00:01:06,410
images, which are great when you're developing and you don't have the assets on hand.

18
00:01:06,840 --> 00:01:08,520
And this can be image number three.

19
00:01:08,520 --> 00:01:11,310
We don't need a whole lot of images for this example.

20
00:01:11,310 --> 00:01:15,720
And we could add in even more images and all of the functionality is still going to be there.

21
00:01:15,990 --> 00:01:22,140
So once they're sitting within this pop area, that's where we can have our images.

22
00:01:22,140 --> 00:01:27,150
And all of the image is that are going to be sitting in there are going to have the same functionality

23
00:01:27,150 --> 00:01:29,390
and we're going to attach that functionality with JavaScript.

24
00:01:29,820 --> 00:01:32,310
Some of the other things that we need, we need another div.

25
00:01:32,520 --> 00:01:36,250
And this is going to be essentially where we're going to show our images.

26
00:01:36,570 --> 00:01:38,970
So where we've got our overlay.

27
00:01:39,900 --> 00:01:42,090
So we're starting this out and we're going to be hiding it.

28
00:01:42,090 --> 00:01:48,540
So updating it within the classes that this is going to be a hidden element, creating our overlay.

29
00:01:48,570 --> 00:01:53,870
So this is what's going to overlay the rest of the content so we can darken that content.

30
00:01:54,150 --> 00:01:57,230
And we're also going to close using JavaScript.

31
00:01:57,240 --> 00:02:03,990
We're going to attach the ability to close our Pop-Up by clicking the overlay and as well as clicking

32
00:02:03,990 --> 00:02:05,870
a close, that's our overlay.

33
00:02:05,880 --> 00:02:07,170
We don't need to have any content.

34
00:02:07,180 --> 00:02:10,990
And then just underneath, this is where we're going to actually place our image.

35
00:02:11,610 --> 00:02:13,510
So this is where our output is going to go.

36
00:02:13,560 --> 00:02:19,160
So within here, how you create a span and give this one a class of clothes.

37
00:02:19,410 --> 00:02:26,050
So any element that we want to be able to close our pop up, we just give it a class of clothes.

38
00:02:26,760 --> 00:02:32,850
And then lastly, we need an image that we need to add in here using JavaScript is how we're going to

39
00:02:32,850 --> 00:02:33,650
add that image.

40
00:02:33,900 --> 00:02:36,710
So essentially, that is our model that's going to pop up.

41
00:02:37,110 --> 00:02:39,040
We also need to apply some styling.

42
00:02:39,060 --> 00:02:44,780
So this one in this case, we are doing quite a bit of setup with the HTML and CSFs that's going to

43
00:02:45,470 --> 00:02:50,670
this is just core functionality that we needed for our model and for our image.

44
00:02:50,910 --> 00:02:57,330
So first, we've got a class of hide that we're using and within hyd we've got a property of display

45
00:02:57,330 --> 00:02:57,630
none.

46
00:02:57,960 --> 00:03:01,020
So we don't want to be able to see that particular Pop-Up.

47
00:03:01,320 --> 00:03:05,810
So when we refresh it, we've got that element there, but we don't have anything sitting within it.

48
00:03:05,820 --> 00:03:08,070
Let's update the overlay.

49
00:03:08,220 --> 00:03:15,030
So adding in within the overlay, this is we want it full width, so whatever the width of the pages,

50
00:03:15,360 --> 00:03:20,160
and we want to apply this darker color across that entire element.

51
00:03:20,170 --> 00:03:22,650
Add our background and we're going to use it.

52
00:03:22,860 --> 00:03:23,670
We're going to use our.

53
00:03:24,450 --> 00:03:25,770
It's actually background color.

54
00:03:25,800 --> 00:03:32,900
So updating that and using our G.P.A. so some of the older browsers might not be able to handle ARGA.

55
00:03:32,940 --> 00:03:34,190
So let's keep that in mind.

56
00:03:34,550 --> 00:03:35,700
What's Arga?

57
00:03:35,700 --> 00:03:42,810
So it's red, green, blue and alpha and the alpha is a value of zero to one.

58
00:03:42,840 --> 00:03:48,870
So the more we want to increase the transparency of it, the higher of a number that we can go or the

59
00:03:48,870 --> 00:03:50,430
lower the number that we can do.

60
00:03:51,180 --> 00:03:53,460
And we set this to position absolute.

61
00:03:53,790 --> 00:04:01,590
And this gives us the ability to position it so we can set it at zero six top and left will be zero

62
00:04:01,950 --> 00:04:02,450
as well.

63
00:04:02,610 --> 00:04:07,250
So quick, do a refresh and for now I'm going to move that out while we're building that up.

64
00:04:07,560 --> 00:04:09,590
So you see that we've got our overlay.

65
00:04:09,630 --> 00:04:11,000
So that's showing up there.

66
00:04:11,340 --> 00:04:14,880
We also need to handle some of our output area.

67
00:04:14,910 --> 00:04:16,080
So let's update that.

68
00:04:16,110 --> 00:04:20,760
So this is that one that we were looking at where we want to have our image.

69
00:04:21,010 --> 00:04:23,380
So this is where the actual pop up is going to sit.

70
00:04:23,940 --> 00:04:29,520
So let's give this output, give it a default, and we can do it as a percentage.

71
00:04:29,550 --> 00:04:30,920
So it's more dynamic.

72
00:04:31,380 --> 00:04:39,300
So do a 60 percent by 40 percent set background color for this one to white, and we'll position this

73
00:04:39,300 --> 00:04:40,940
one absolute as well.

74
00:04:40,980 --> 00:04:46,930
And we're going to position it off the top 50 percent and also left 50 percent.

75
00:04:46,990 --> 00:04:51,750
So it looks like and then we can always move it around as well and we're going to overflow.

76
00:04:51,870 --> 00:04:53,660
So we'll hide all of the overflow.

77
00:04:53,700 --> 00:04:55,380
We'll add a Z index here.

78
00:04:55,380 --> 00:04:59,970
So that is on top of the other elements so we can give it a Z index of.

79
00:05:00,000 --> 00:05:01,510
One hundred, so see what that looks like.

80
00:05:01,830 --> 00:05:05,260
So refresh, there's our model or pop up there.

81
00:05:05,610 --> 00:05:09,390
Let's actually we're going to make it a little bit more over to the left.

82
00:05:09,580 --> 00:05:14,810
So it should be 20 percent because, ah, with the 60 and then the top should also be 30.

83
00:05:14,820 --> 00:05:16,510
So just make a quick adjustment there.

84
00:05:16,800 --> 00:05:18,360
So now it's always going to be centered.

85
00:05:18,370 --> 00:05:21,630
So no matter how big we make our screen, it's always going to be centered.

86
00:05:21,840 --> 00:05:27,930
So that was because we're working off of a full hundred percent with of course, now let's add in our

87
00:05:27,930 --> 00:05:28,910
image into it.

88
00:05:29,850 --> 00:05:36,480
So selecting our output plus and all of the images that are going to be inside of that output class

89
00:05:37,050 --> 00:05:39,030
setting to 100 percent.

90
00:05:39,030 --> 00:05:46,380
So covers full and also setting a height to 100 percent will position this one absolute as well and

91
00:05:46,380 --> 00:05:49,560
setting the top to zero and left to zero.

92
00:05:49,570 --> 00:05:50,870
So it goes right to the corner.

93
00:05:50,910 --> 00:05:52,350
So it's going to add in our image.

94
00:05:52,530 --> 00:05:56,480
We also want to position our closing span.

95
00:05:57,060 --> 00:05:58,690
So let's update that one as well.

96
00:05:59,700 --> 00:06:05,870
So within our output, we've got a span well positioned, this one absolute as well.

97
00:06:05,880 --> 00:06:11,430
So we have full control of where this particular span is sitting and we use a right.

98
00:06:11,590 --> 00:06:17,220
So we're coming off of the right side and we can do five percent off of the right side, adding in the

99
00:06:17,220 --> 00:06:17,880
Z index.

100
00:06:18,000 --> 00:06:26,370
So this one should be a fairly large Z index and make it larger than the output so we can set that to

101
00:06:26,370 --> 00:06:31,970
one, two, five, one or two, and we'll set the cursor two pointer and update the color to be white.

102
00:06:32,280 --> 00:06:33,750
So do a quick refresh.

103
00:06:33,960 --> 00:06:36,240
Actually, the color should be for now.

104
00:06:36,240 --> 00:06:37,000
We'll make it black.

105
00:06:37,000 --> 00:06:37,210
Can we?

106
00:06:37,470 --> 00:06:40,560
We can always adjust this because we can't see it on the white background.

107
00:06:40,560 --> 00:06:44,070
So we've got our X there to close our pop up image.

108
00:06:44,280 --> 00:06:48,960
We've got our pop up image and we've got our model and everything.

109
00:06:48,960 --> 00:06:50,560
Our overlay is all ready to go.

110
00:06:50,820 --> 00:06:52,760
So we're ready to sort of essentially it.

111
00:06:52,770 --> 00:07:00,030
We've set up all of our core HTML access that we need and now we're ready to move on to the JavaScript.

112
00:07:00,310 --> 00:07:02,970
We're going to create all of that interaction and functionality.

113
00:07:02,970 --> 00:07:08,430
So that's still to come in the next lesson, I'm just going to adjust this one back to display so we

114
00:07:08,430 --> 00:07:10,500
can hide and show it using JavaScript.

115
00:07:10,500 --> 00:07:11,820
So all of that is yet to come.

116
00:07:12,090 --> 00:07:19,500
So go ahead and set up your own image gallery and we're going to attach to these images JavaScript functionality.