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.