I thought it might be a good idea to list the essential steps required to install a jQuery plugin to your website. This is for beginners that are just learning about the magic of JavaScript, and it’s friendly cousin jQuery. This example was led by Brenna at HackerYou, and we used the popular Flexslider for our demo.
Read Documentation of Plugin and Download
This seems like an obvious first step, but even if you don’t understand everything it’s good to take a look at the documentation before you get started. (Flexslider provides well written instructions and is fairly easy to follow.) At this point you should also download the folders required to run the plugin.
Load jQuery Library (google server)
We used the google server jQuery library, this is fast and efficient. It only needs to be loaded once, even if you are installing multiple plugins. Google has a variety of hosted libraries for developers, you will obviously need the jQuery one. Copy and paste the code into the <head> of your HTML document.
This is an image of what the code looks like.
Put Downloaded Files into Corresponding Folders
Next step is to put the files you have downloaded into your project folders. Put the .css file in your CSS folder, and the .js in your JS folder. (Often there will be two versions of the .js file, you might see a -min tacked on the end of one. This file has no whitespace – if you were to open it in your text editor you would see all the code in one (very long) line. The file without the -min has whitespace, and is more readable to the human eye. The -min file will load much faster, so it’s probably in your best interest to use that one.)
Link files (CSS and JS) in Document <head>
Now that you’ve placed the downloaded files into the correct folders, you need to link to them in the head of your HTML document. This is the same idea as when you link to your regular old .css stylesheet. It’s good practise to place your .css file last in line, because you will likely want to override some of the pre-set options from the plugin, and it is best to make these changes in your .css document, not the downloaded .css doc. More on that later.
Add HTML Markup
Next you will need to write (or copy and paste) some HTML so that the plugin can work. The jQuery plugin documentation will give you some instructions as to how to format your HTML – basically so that the HTML, CSS, and JS are communicating and are all on the same page.
Here’s an example of the HTML for flexslider
Add JS (first $(window).load, as well as the actual plugin’s JS)
The plugin documentation will also provide the JavaScript code to make the plugin function. This will go in <script> tags, and this can be placed in the document <head> as well. Flexslider will include some code that will look like $(window).load and this says “wait for the page to load, before loading the JavaScript.” You will only need to include this command once, even if you have multiple plugins. (You may also come across $(document).ready() which means all the HTML has been loaded, whereas $(window).load waits for all the content to load (for example images). The instructions will likely (but not always) include which to use, but basically it’s important to have two parts in this step: the $(window).load/$(document).ready, and then the call to activate the plugin.
Troubleshooting
At this point you’re ready to test out your website – if there is a problem inspect the error(s) in dev tools, (I use chrome developer tools.) For Flexslider you need to load the arrow fonts from the download, or load your own image. (We also had a fonts folder set up to paste the provided font files into.)
Here’s an image of the folder structure
Configure Options in the JQ Plugin
Flexslider provides a very detailed list of the configurable JS options, you can refer to this to make changes. When you are overwriting their default settings, you will do this in the <script> tags where you initially loaded the JS. Just put the new rule(s) on the next line, and make sure to add the {}
This image shows the configured options
Edit CSS
Once your plugin is up and running, you can start making some stylistic changes. The advice that we were given is to not even touch the provided .css file, and to just overwrite the changes by writing your own classes in your .css file, If you’re not sure what selector to use, inspect the element you want to change in dev tools, and it will show the selector name. It’s always best to do as much configuring as possible with the JS plugin, and then if need be overwrite the CSS to make your final adjustments.
Here’s the CSS used to overwrite the default flexslider rules
Note: Rather than putting the <script> and <script src> tags in the doc <head>, you can put them in the <body> but at the bottom of your document, after all your content. This may help speed up the load time.
Also, make sure when you are inserting your scripts in the doc <head> load the jQuery script first, then the .js plugin file, and then your own JS that will call the plugin.
Here’s the finished example of flexslider, with some customizations
Hannah Allen 