1
00:00:00,340 --> 00:00:04,650
As I mentioned video, most plug
ins have the same file structure.

2
00:00:04,650 --> 00:00:08,710
A CSS file, a JavaScript file,
and perhaps some images.

3
00:00:08,710 --> 00:00:13,500
In addition, many plug ins are added
to a webpage following the same steps.

4
00:00:13,500 --> 00:00:16,050
First, attach the CSS file.

5
00:00:16,050 --> 00:00:21,360
You attach the CSS file as would any
other CSS file using the link tag.

6
00:00:21,360 --> 00:00:27,140
It's best to place the CSS file
before your sites CSS file or files.

7
00:00:27,140 --> 00:00:31,890
That way, you can override styling
of the plug in in your own CSS file.

8
00:00:31,890 --> 00:00:35,930
I'll show you how to change the look
of a plug in by modifying a CSS file

9
00:00:35,930 --> 00:00:37,420
in third section of this course.

10
00:00:38,620 --> 00:00:40,880
Second, attach jQuery.

11
00:00:40,880 --> 00:00:43,590
jQuery provides functionality
to the plug-in.

12
00:00:43,590 --> 00:00:47,010
So it needs to load prior
to the plug-in file, and

13
00:00:47,010 --> 00:00:50,690
prior to any code that you write
to call the plug-in into action.

14
00:00:50,690 --> 00:00:52,940
You attach this file using a script tag.

15
00:00:54,240 --> 00:00:57,700
Third, you attach the JavaScript file for
the plugin.

16
00:00:57,700 --> 00:01:01,950
This goes after the jQuery file, and
also is attached using a script tag.

17
00:01:03,530 --> 00:01:06,010
Four, you structure the HTML.

18
00:01:06,010 --> 00:01:10,490
Many plugins require you to structure
your HTML in a particular way.

19
00:01:10,490 --> 00:01:14,140
This might be as simple as just
adding an id to a div tag.

20
00:01:14,140 --> 00:01:17,210
Or it might mean creating
a bolded list in a special way.

21
00:01:17,210 --> 00:01:20,880
And adding class names to identify
different components on the page.

22
00:01:22,040 --> 00:01:22,730
Just in a minute,

23
00:01:22,730 --> 00:01:26,010
we'll step through an example of
this as we add a plugin to a page.

24
00:01:27,800 --> 00:01:30,070
Fifth, add your own JavaScript.

25
00:01:30,070 --> 00:01:34,390
To make the plug in work,
you need to add a bit of your programming.

26
00:01:34,390 --> 00:01:39,230
You add this programming using either
an external attached JavaScript file, or

27
00:01:39,230 --> 00:01:41,780
just a set of script tags on the page.

28
00:01:41,780 --> 00:01:44,920
If you plan on using this
programming throughout your site,

29
00:01:44,920 --> 00:01:47,190
it's best to use an external
JavaScript file.

30
00:01:48,390 --> 00:01:52,460
Sixth, select an element
on the page using jQuery.

31
00:01:52,460 --> 00:01:56,010
Most plugins require you to
select something on the page

32
00:01:56,010 --> 00:01:59,760
using jQuery's selector engine,
the dollar sign function.

33
00:01:59,760 --> 00:02:02,580
For example, in the case of a light box,
you might select

34
00:02:02,580 --> 00:02:07,680
all the images on the page, or a set of
tabbed panels, you might select a div tag.

35
00:02:07,680 --> 00:02:12,210
That surrounds the HTML that
makes up the tabs and panels.

36
00:02:12,210 --> 00:02:14,580
Each plugin has its own
set of requirements for

37
00:02:14,580 --> 00:02:17,580
this, which you'll find in
the plugin's documentation.

38
00:02:18,580 --> 00:02:21,180
Lastly, we call the plugin function.

39
00:02:21,180 --> 00:02:23,840
This is usually the easiest
part of the process.

40
00:02:23,840 --> 00:02:27,000
You apply the function to the selection,
something like this.

41
00:02:29,030 --> 00:02:32,320
Literally, it can be as
simple as one line of code.

42
00:02:32,320 --> 00:02:36,750
Let's take a look at an example as
we add a cool page transition affect

43
00:02:36,750 --> 00:02:39,640
using the jQuery plugin we
looked at in the last video.

44
00:02:40,760 --> 00:02:43,150
You can follow along
with me if you'd like.

45
00:02:43,150 --> 00:02:47,080
Just click on the workspace button
on this page to open the workspace.

46
00:02:47,080 --> 00:02:48,840
If you want to use your own text editor,

47
00:02:48,840 --> 00:02:51,960
you can also download the project
files for this course.

48
00:02:51,960 --> 00:02:54,410
Now, remember the jQuery plug in pattern.

49
00:02:54,410 --> 00:02:56,280
One, attach files.

50
00:02:56,280 --> 00:02:58,460
Two, structure the HTML.

51
00:02:58,460 --> 00:03:01,000
And three, add our programming.

52
00:03:01,000 --> 00:03:02,850
Let's start with the files.

53
00:03:02,850 --> 00:03:06,240
First we link to the style sheet file for
the plugin.

54
00:03:06,240 --> 00:03:08,510
Remember that we keep
the plugin files together.

55
00:03:08,510 --> 00:03:13,795
So, the CSS file for this plugin is in the
animsition folder, inside the JS folder.

56
00:03:15,075 --> 00:03:16,585
Now there are several
different files here.

57
00:03:16,585 --> 00:03:19,535
Now in general you want
to use minified files.

58
00:03:19,535 --> 00:03:22,585
Those are files that have extra
spaces stripped out of them so

59
00:03:22,585 --> 00:03:26,175
that they make smaller files
that download more quickly.

60
00:03:26,175 --> 00:03:29,970
Also, place this file before
your site's main CSS file.

61
00:03:29,970 --> 00:03:30,700
Why?

62
00:03:30,700 --> 00:03:34,850
As we'll see later in this course, you can
add specific styles to your style sheets.

63
00:03:34,850 --> 00:03:36,460
That override the styles or

64
00:03:36,460 --> 00:03:40,400
enhance the styles provided
by the plugins style sheet.

65
00:03:40,400 --> 00:03:44,300
By placing your CSS file last,
you'll know that your styles will

66
00:03:44,300 --> 00:03:48,400
override the same style names
in the plugins CSS file.

67
00:03:48,400 --> 00:03:51,200
Now, why not just change
the plugins css file?

68
00:03:51,200 --> 00:03:54,950
Well, if the plugin author
later updates the plugin.

69
00:03:54,950 --> 00:03:57,540
Adds new styles, and changes things.

70
00:03:57,540 --> 00:04:01,860
You'll need to replace the current
plugin CSS file with the new one.

71
00:04:01,860 --> 00:04:05,640
And when you do that you'll eliminate
any styles that you've added.

72
00:04:05,640 --> 00:04:09,300
So you'll want to put new
styles that affect the plugin

73
00:04:09,300 --> 00:04:11,240
in your main style sheet.

74
00:04:11,240 --> 00:04:15,140
Now for the JavaScript files we'll add
a link down near the closing body tag.

75
00:04:15,140 --> 00:04:17,810
First we need to link
to the jQuery library.

76
00:04:17,810 --> 00:04:20,270
This will load jQuery into the browser.

77
00:04:20,270 --> 00:04:24,350
Because the plugin requires jQuery,
we have to link to it first.

78
00:04:24,350 --> 00:04:26,659
Then we can link to the plugin file.

79
00:04:35,920 --> 00:04:40,679
The next step is to make any changes
to the HTML that the plugin requires.

80
00:04:40,679 --> 00:04:43,639
To figure this out,
let's visit the plugin website.

81
00:04:44,980 --> 00:04:49,070
Here's where the site lists
the changes required for the HTML.

82
00:04:49,070 --> 00:04:52,560
Now there needs to be a div
that wraps the page's content.

83
00:04:52,560 --> 00:04:56,500
The animation transition plugin
requires a class for that container.

84
00:04:56,500 --> 00:05:00,590
In addition, every link that triggers
a transition effect needs a class.

85
00:05:00,590 --> 00:05:01,830
Let's start with the container div.

86
00:05:03,170 --> 00:05:06,380
Now, there's already a class
attribute on this tag.

87
00:05:06,380 --> 00:05:08,649
So we just add a space,
and a new class name.

88
00:05:10,511 --> 00:05:14,629
Now I'll add the link class to each
of these links in the navigation.

89
00:05:15,969 --> 00:05:21,129
They both have class attributes already,
so I'll just add the class name.

90
00:05:21,129 --> 00:05:24,689
Now there are two other links
that need the attribute as well.

91
00:05:30,169 --> 00:05:31,110
All right.

92
00:05:31,110 --> 00:05:33,290
The HTML is in place.

93
00:05:33,290 --> 00:05:36,310
We just need to add programming
to call the plug-in.

94
00:05:36,310 --> 00:05:37,540
Let's look at the docs again.

95
00:05:38,670 --> 00:05:41,070
At the bottom of the page
there's the code.

96
00:05:41,070 --> 00:05:43,250
You'll notice that it
looks like a lot of stuff.

97
00:05:43,250 --> 00:05:46,640
But that big block of code
in the middle is a set of

98
00:05:46,640 --> 00:05:49,320
possible options to configure the plug in.

99
00:05:49,320 --> 00:05:51,220
We'll talk about that in the next video.

100
00:05:51,220 --> 00:05:53,270
But for now, to get the plugin working,

101
00:05:53,270 --> 00:05:57,490
we just need to select the outer div
using jQuery, and call the plugin.

102
00:05:58,580 --> 00:06:02,490
Since every page in our project will
have this effect, it's best if we create

103
00:06:02,490 --> 00:06:07,030
a separate, external JavaScript file, and
link it to all the pages on the site.

104
00:06:08,180 --> 00:06:12,374
Let's create a new file in the JS folder,
named main.js.

105
00:06:14,514 --> 00:06:16,600
In this file, I'll add our programming.

106
00:06:18,190 --> 00:06:23,490
First, we select the outer div for the
page, the one we added the class name to.

107
00:06:23,490 --> 00:06:26,440
The dollar sign is the jQuery function.

108
00:06:26,440 --> 00:06:31,210
We give it a CSS selector, in this case
a class name, and jQuery selects it.

109
00:06:32,600 --> 00:06:34,909
Then we call the plugin on that selection.

110
00:06:36,429 --> 00:06:40,590
This runs the special programming
in the plugin, and yes, that's it!

111
00:06:40,590 --> 00:06:41,640
That's all we need for now.

112
00:06:42,690 --> 00:06:45,200
Let's link this new JavaScript
file to our web page.

113
00:06:46,770 --> 00:06:48,540
This goes after all the other scripts,

114
00:06:48,540 --> 00:06:52,510
because it's dependent on both
the plugin and jQuery files.

115
00:06:52,510 --> 00:06:56,540
I'll save the files, and
preview the workspace.

116
00:06:56,540 --> 00:07:00,140
When I click a link,
notice that the homepage fades out.

117
00:07:00,140 --> 00:07:03,360
However, the other pages on
the site don't do anything.

118
00:07:03,360 --> 00:07:06,720
That's because we haven't added
the proper code for them.

119
00:07:06,720 --> 00:07:08,650
That's your assignment right now.

120
00:07:08,650 --> 00:07:11,870
Add the required code to
the other two pages in this site.

121
00:07:11,870 --> 00:07:17,160
That is, link to the CSS file,
the JavaScript files, and add the proper

122
00:07:17,160 --> 00:07:22,670
HTML markup to the Team.html and
Work.html pages.

123
00:07:22,670 --> 00:07:25,600
If you get it working,
you should see a simple fade out,

124
00:07:25,600 --> 00:07:28,500
fade in transition between
all the pages in the site.

125
00:07:29,890 --> 00:07:32,810
In the next video,
we'll look at how to customize this plugin

126
00:07:32,810 --> 00:07:37,240
by passing a JavaScript object
literal with configuration settings.

127
00:07:37,240 --> 00:07:37,740
See you there.