jQuery: a javascript library

Intro

What is a javascript library?

A javascript library is a collection of javascript functions and methods that you can download or reference to create cool effects without having to write your own code. Some of the popular javascript libraries are:

• jQuery
• Mootools
• Script.aculo.us (scriptaculous)
• Prototype

What is jQuery

Jquery is the javascript library we will learn about this term. It arguably has the largest community supporting it and is now getting support in Drupal which we will learn about next term. They call themselves the "write less, do more." library. It has a very powerful chaining command structure for manipulating html and css elements and groups of elements. Or you can just use the functions other people have written which we will do in the demos.

Examples / Demos

Brief look at jQuery itself - see demo

Photo Gallery - see demo

1. Create a folder in your root directory and name it assets
2. Copy the gallery.css to the assets folder (right click as save link as)
3. copy the jquery.galleria.js and galleria_enhanced.js to the assets folder (right click as save link as for each)
4. In your header add these lines of code:
   1. link to the jquery javascript file up on the google site (this link is to latest build of version 1):
      <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
   2. link to the two galleria javascript files (the enhanced gives the fade technique on the thumbnails and makes the call to jquery)
      <script type="text/javascript" src="/~webclass/yourname/assets/jquery.galleria.js"></script>
      <script type="text/javascript" src="/~webclass/yourname/assets/galleria_enhanced.js"></script>
      
   3. link to the stylesheet for the galleria
      <link type="text/css" href="/~webclass/yourname/assets/galleria.css" rel="stylesheet" media="screen">
      
5. In your body, add your list of images: create an unordered list with images and give the ul a class of "gallery"
   <ul class="gallery"><li><img [snip] /></li></ul>
6. Test and modify gallery.css until you're happy with the look
7. For more information see The Galleria Demo site

Sliders - see demo

1. Copy navSliding.js into your assets folder (right click and Save Link As...)
2. Then put these two lines (with corrected paths) in the top of your code:
   <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js">
   </script>
   <script type="text/javascript" src="/~webclass/yourname/assets/navSliding.js">
   </script>

Then use CSS to style your new capabilities

• Example of styled Drawer and Styled Navigation
• Example of Styled Photo Gallery
  • WWU
  • Galleria Designer

Extra - Cool Stuff

Rounded corners