Themeforest

Adding jQuery To Your Website

The jQuery javascript library offers an excellent and easy way for both experienced and beginner web designers and website owners to add great effects or features to any site.

The jQuery website contains hundreds of plugins, which allow you to quickly add elements to your website such as web photo galleries, navigation, animation, slideshows, mp3 players, AJAX and many more. These plugins are usually well supported and come with downloadable demo files, which makes it easier to integrate the code into your own website.

Later on in our blog we will show examples of where Design Chemical use this excellent resource in our web design projects. However, before you can start using jQuery features you must first know how to add the library to your web page.

There are two ways to include the jQuery library file:

1. Upload The jQuery Library File to Your Server

With this method you hold the main jQuery library file on your web server. You can download the latest version from the jQuery website.

Inbetween the head tags include the link to the jQuery file – make sure that the path is correct based on your file structure. Example – if you download the file “jquery-1.3.2.min.js” to subdirectory “js/” then use the following code:

<script type="text/javascript" src="/js/jquery-1.3.2.min.js"></script>

Then upload the jQuery library file (e.g. jquery-1.3.2.min.js) to your web server along with your edited web page.

Make sure that the code comes before any other jQuery code in your document head.

2. Download The jQuery Library File Directly From Google

Instead of holding the file locally you can have your web page download directly from the google code repository. Main advantages of this is that if your visitor has already visited a website that uses the same code then your site can utilise the locally cached copy, which improves your page loading time. With jQuery becoming more and more popular, this method provides a definite advantage.

To download directly from google simply include the following code inbetween your head tags:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

Upload your edited web page to your web server and that’s it!

Easy … now with the library included in your web page you are free to utilise the code to add great features to your web design. To see a sample of what jQuery can do click on one of the project images on our web design portfolio to see a gallery sample in action.

9 Comments

Leave a comment

To add code to your comments wrap the code text in [text][/text] tags