Sample jQuery Implementation

In this example we will build a simple slideshow using jQuery and the cycle plugin.

Download Source Files | Demo

The Foundation

  1. In your web root create a new folder named cycle.
  2. In the cycle directory create your sub directory structure (assets directory with sub directories)
  3. In an editor of your choice create a new html document (html5 doctype) | Starter HTML
  4. In the body create the structure for you content. The way the Cycle plugin works is that it will look take the the children of the declared element and cycle through them using the parameters define your JavaScript.

  1. Add some CSS to spruce things up…

Adding the JavaScript

  1. Include jQuery from the Google CDN. This script tag can be placed in the head of the document or before the closing html tag. Make sure that it precedes the call to the plugin we’ll include in the next step.

  1. Include Cycle from the CDNJS.com

Setting up the JavaScript Calls

  1. Create a new file called local-calls.js and save it in the scripts directory.
  2. Include the jQuery wrapper function to make sure the document has fully loaded prior to calling the script.

  1.  Include this file in the head of the document following the jQuery and Cycle calls.

  1.  In the local-calls.js file, include the following…

Note that we are binding the script to the .gallery element. If you used a different naming convention you would need to change this to reference that element. Play around with the effects by adding different parameters to the script. Use this page for reference.