Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
What 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?
This video doesn't have any notes.
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
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
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up