Jquery Lab

In class, implement a slide show using the Jquery Cycle Plugin and the images provided below. You should upload this to a directory in your web space named cycle. (ualr.edu/username/cycle). You should use a minimum of 2 Options. Feel free to use the case study we examined in class week. If possible I’d like you to externalize the calls to the plugin in a separate file rather than include them in the html document. Here is an outline of the process.

  1. Create a folder for the project named cycle and include the proper directories.
  2. Create an HTLM5 document and save it as index.html in the root of the directory you created in step one. Make sure you add the author meta tag and a proper title.
  3. Attach a stylesheet named screen.css
  4. In the <head> of your document, include a call to Jquery either locally by downloading and placing in your scripts directory or via a CDN.
  5. In the <head> of your document, include a call to the Cycle Plugin either locally by downloading and placing in your scripts directory or via a CDN.
  6. Create the html pointing to these images.
  7. Wrap the images in a div and add a class or id of gallery.
  8. In the <head> of your document, use the Jquery wrapper function make the proper calls to the cycle plugin. There are tons of examples here. Simple Example Here (View Source). Make sure you bind the function to the element created in step 7.
  9. Preview and test in the browser to make sure it presents properly.
  10. Add a bit of CSS to beautify the presentation.
  11. Upload and test.
  12. Submit the URL to me via email.