Preview
Video Player
00:00
00:00
Adding a Plugin to a Web Page
7:38What are the basic steps for using a plugin? What files do you need to add, how do you change your HTML, and how do you activate the plugin?
As I mentioned video, most plug
ins have the same file structure.
0:00
A CSS file, a JavaScript file,
and perhaps some images.
0:04
In addition, many plug ins are added
to a webpage following the same steps.
0:08
First, attach the CSS file.
0:13
You attach the CSS file as would any
other CSS file using the link tag.
0:16
It's best to place the CSS file
before your sites CSS file or files.
0:21
That way, you can override styling
of the plug in in your own CSS file.
0:27
I'll show you how to change the look
of a plug in by modifying a CSS file
0:31
in third section of this course.
0:35
Second, attach jQuery.
0:38
jQuery provides functionality
to the plug-in.
0:40
So it needs to load prior
to the plug-in file, and
0:43
prior to any code that you write
to call the plug-in into action.
0:47
You attach this file using a script tag.
0:50
Third, you attach the JavaScript file for
the plugin.
0:54
This goes after the jQuery file, and
also is attached using a script tag.
0:57
Four, you structure the HTML.
1:03
Many plugins require you to structure
your HTML in a particular way.
1:06
This might be as simple as just
adding an id to a div tag.
1:10
Or it might mean creating
a bolded list in a special way.
1:14
And adding class names to identify
different components on the page.
1:17
Just in a minute,
1:22
we'll step through an example of
this as we add a plugin to a page.
1:22
Fifth, add your own JavaScript.
1:27
To make the plug in work,
you need to add a bit of your programming.
1:30
You add this programming using either
an external attached JavaScript file, or
1:34
just a set of script tags on the page.
1:39
If you plan on using this
programming throughout your site,
1:41
it's best to use an external
JavaScript file.
1:44
Sixth, select an element
on the page using jQuery.
1:48
Most plugins require you to
select something on the page
1:52
using jQuery's selector engine,
the dollar sign function.
1:56
For example, in the case of a light box,
you might select
1:59
all the images on the page, or a set of
tabbed panels, you might select a div tag.
2:02
That surrounds the HTML that
makes up the tabs and panels.
2:07
Each plugin has its own
set of requirements for
2:12
this, which you'll find in
the plugin's documentation.
2:14
Lastly, we call the plugin function.
2:18
This is usually the easiest
part of the process.
2:21
You apply the function to the selection,
something like this.
2:23
Literally, it can be as
simple as one line of code.
2:29
Let's take a look at an example as
we add a cool page transition affect
2:32
using the jQuery plugin we
looked at in the last video.
2:36
You can follow along
with me if you'd like.
2:40
Just click on the workspace button
on this page to open the workspace.
2:43
If you want to use your own text editor,
2:47
you can also download the project
files for this course.
2:48
Now, remember the jQuery plug in pattern.
2:51
One, attach files.
2:54
Two, structure the HTML.
2:56
And three, add our programming.
2:58
Let's start with the files.
3:01
First we link to the style sheet file for
the plugin.
3:02
Remember that we keep
the plugin files together.
3:06
So, the CSS file for this plugin is in the
animsition folder, inside the JS folder.
3:08
Now there are several
different files here.
3:15
Now in general you want
to use minified files.
3:16
Those are files that have extra
spaces stripped out of them so
3:19
that they make smaller files
that download more quickly.
3:22
Also, place this file before
your site's main CSS file.
3:26
Why?
3:29
As we'll see later in this course, you can
add specific styles to your style sheets.
3:30
That override the styles or
3:34
enhance the styles provided
by the plugins style sheet.
3:36
By placing your CSS file last,
you'll know that your styles will
3:40
override the same style names
in the plugins CSS file.
3:44
Now, why not just change
the plugins css file?
3:48
Well, if the plugin author
later updates the plugin.
3:51
Adds new styles, and changes things.
3:54
You'll need to replace the current
plugin CSS file with the new one.
3:57
And when you do that you'll eliminate
any styles that you've added.
4:01
So you'll want to put new
styles that affect the plugin
4:05
in your main style sheet.
4:09
Now for the JavaScript files we'll add
a link down near the closing body tag.
4:11
First we need to link
to the jQuery library.
4:15
This will load jQuery into the browser.
4:17
Because the plugin requires jQuery,
we have to link to it first.
4:20
Then we can link to the plugin file.
4:24
The next step is to make any changes
to the HTML that the plugin requires.
4:35
To figure this out,
let's visit the plugin website.
4:40
Here's where the site lists
the changes required for the HTML.
4:44
Now there needs to be a div
that wraps the page's content.
4:49
The animation transition plugin
requires a class for that container.
4:52
In addition, every link that triggers
a transition effect needs a class.
4:56
Let's start with the container div.
5:00
Now, there's already a class
attribute on this tag.
5:03
So we just add a space,
and a new class name.
5:06
Now I'll add the link class to each
of these links in the navigation.
5:10
They both have class attributes already,
so I'll just add the class name.
5:15
Now there are two other links
that need the attribute as well.
5:21
All right.
5:30
The HTML is in place.
5:31
We just need to add programming
to call the plug-in.
5:33
Let's look at the docs again.
5:36
At the bottom of the page
there's the code.
5:38
You'll notice that it
looks like a lot of stuff.
5:41
But that big block of code
in the middle is a set of
5:43
possible options to configure the plug in.
5:46
We'll talk about that in the next video.
5:49
But for now, to get the plugin working,
5:51
we just need to select the outer div
using jQuery, and call the plugin.
5:53
Since every page in our project will
have this effect, it's best if we create
5:58
a separate, external JavaScript file, and
link it to all the pages on the site.
6:02
Let's create a new file in the JS folder,
named main.js.
6:08
In this file, I'll add our programming.
6:14
First, we select the outer div for the
page, the one we added the class name to.
6:18
The dollar sign is the jQuery function.
6:23
We give it a CSS selector, in this case
a class name, and jQuery selects it.
6:26
Then we call the plugin on that selection.
6:32
This runs the special programming
in the plugin, and yes, that's it!
6:36
That's all we need for now.
6:40
Let's link this new JavaScript
file to our web page.
6:42
This goes after all the other scripts,
6:46
because it's dependent on both
the plugin and jQuery files.
6:48
I'll save the files, and
preview the workspace.
6:52
When I click a link,
notice that the homepage fades out.
6:56
However, the other pages on
the site don't do anything.
7:00
That's because we haven't added
the proper code for them.
7:03
That's your assignment right now.
7:06
Add the required code to
the other two pages in this site.
7:08
That is, link to the CSS file,
the JavaScript files, and add the proper
7:11
HTML markup to the Team.html and
Work.html pages.
7:17
If you get it working,
you should see a simple fade out,
7:22
fade in transition between
all the pages in the site.
7:25
In the next video,
we'll look at how to customize this plugin
7:29
by passing a JavaScript object
literal with configuration settings.
7:32
See you there.
7:37