Steps for jQuery Plugin Integration into Website

Most of the websites has rich and interactive user interface today. jQuery provide us a thousands of free plugins to enhance our website. Every business owner or website developer wants to use some jQuery plugins for his website.

if you know basic of html/css/js, you can easily integrate various jQuery plugin into your website. Most of these plugins have some common steps. All you need to use their js/css/html code step by step.

These steps are common to add various jQuery elements (like: gallery, slider, menu, light-box etc) into our website/html template.

We will use jQuery Nivo Slider in our example.

Steps for jQuery plugin integration:

1) Download jQuery file (optional)

All jQuery plugins use jQuery as a base file to work properly. Therefore, you can download jQuery file.

jQuery file most of the time named as “jquery-version.min.js” (for example: jquery-2.2.4.js or jquery-3.1.0.min.js”).

However, almost all jQuery plugins already includes jQuery files, so you can skip this and follow next step.

2) Download jQuery plugin (Nivo Slider) file

Whatever plugin you want to use, download it. Make sure you download latest jQuery plugin. It could be slider, gallery, menu, accordion, tabs, overlay or any other beautiful jQuery element. For an example, we can download jQuery Nivo Slider.

Most of these plugin comes with example. If example or demo pages are available, you can run and check to make sure that it is working. Nivo slider also has demo.html file. You can also check demo.html’s source code. You will get an idea that what css/js/image files are used for this plugin.

3) Simplify jQuery plugin (optional)

The purpose of this step is to simplify file/folders, so that we can remove unwanted files and focus should be on including the right files.

There are few files other than css/js/html files which are not mandatory for integration. They exists for some other or additional purpose. For example, in Nivo slider folder, you can delete (.gitignore, README.md, package.json etc files). Only css/js/html and image files are required for basic functionality.

Note: Please make sure plugin is working after deleting those files. You can check it by running demo file. If you are not sure that which file to delete, then do not delete and you can skip this step.

4) Download HTML template (optional)

If you already have your own html template or working with existing website, you can skip this step too. If not, you can download simple html templates.

It is good to experiment with simple html template. Because, If html template is rich in UI, it will already have a lot of jQuery plugins. Therefore, it will be little complex to focus on right thing. Simple template will make it easy. Once experimented with simple html template, you can try in other complex websites with more confidence.

In case your website/template already has jQuery file, there is no need to include it again.

5) Copy/Move all required js/css/image files into your template/website folder

You need to copy all js/css/image files(or folder) into your website folder. You can follow your own directory structure or simply copy file/folder as it is in jQuery plugin folder. At last you need to make sure that you are including all those files in html page with proper path.

6) Copy All js/css embedded code into your website page.

Copy all code to embedded css files into head and copy all code to include js files before body (or head).

7) Copy plugin’s main html code(div/li etc) into your website body, where you want to display that plugin’s functionality.

All jQuery plugin’s use some predefined html tags format (using div/li/img etc) along with some predefined class/id. You can copy that predefined html code anywhere to invoke that plugin’s functionality.

8) Fix js/css/image paths

You can now test your website page. It should work fine, if all js/css/images are including with proper paths. However, your js/css/image file location may differ from the original jQuery plugin folder structure. You can check each css/js path from page source code and fix them one by one.

9) jQuery plugin should be working by now. You can customize as per plugin options.

In simple words, if you have included jQuery plugin’s all js/css/images files properly, your plugin (for example slider) should work well. You can customize your plugin (such as slider) using different options from plugin’s documentation or website.