Exercise 8: Slide Show Using JavaScript
Resources for this exercise:
- See the Course Schedule for due date. Exercises are due before the beginning of class on the due date.
- See the Homework Frequently Asked Questions (FAQ) page for answers to questions about homework exercises.
In this exercise you will download, configure, install, and use a slide show script that creates a Web-based slide show from a directory of your digital photos and images. This means, of course, that you will need to start with some images (this exercise will require you to have at least five images). This slide show uses JavaScript.
1) See Slideshow 2! at:
http://electricprism.com/aeron/slideshow/
You may wish to run through the demos to see the different ways this script may be used. We will be setting up only a simple version of this slideshow in this exercise.
2) Click on the link to go to the Google code page where you can download
Slideshow at:
http://code.google.com/p/slideshow
On this page you will see the link under "Featured Downloads" to download "Slideshow2r147.zip". Click this link to download the script.
3) The zip file should expand into a folder on your desktop called "Slideshow 2!". This folder contains:
- A "css" folder (that also contains some imnages used by the script)
- an "images" folder (that contains four images, and four thumbnail images, used by the demo.
- an "index.html" file (to run the demo)
- A "js" folder (that contains JavaScripts)
- A "README" file
Let's start by making a few minor changes to some of these files, and uploading them to the server to test the demo.
4) Rename the "images" folder to be "slideshow".
5) Open the "index.html" file. Find the line that reads:
var myShow = new Slideshow('show',
data, {controller: true, height: 300, hu: 'images/', thumbnails: true, width:
400});
and change it to read:
var myShow = new Slideshow('show', data, {controller:
true, height: 300, hu:
'images/slideshow/', thumbnails: true, width: 400});
6) Find the line that reads:
<img src="images/1.jpg" alt="Volcano Asención in Ometepe, Nicaragua." />
and change it to read:
<img src="images/slideshow/1.jpg" alt="Volcano Asención in Ometepe, Nicaragua." />
7) Save this file as "exercise8.html", as it will become your exercise page.
8) Upload "exercise8.html" to your public_html folder on webhawks.
9) Upload the files contained in the "css" folder into your css folder on webhawks.
10) Upload the files contained in the "js" folder into your js folder on webhawks.
11) Upload the "slideshow" folder (previously called "images') into your images folder on webhawks.
12) Point your browser to your exercise 8 page. You should see the slideshow demo working!
13) Now that you have the demo working, you need to customize it to use your own images.For this exercise you will need at least five images.
14) Make your images the size at which you wish to use them (say, about 400 pixels wide by 300 pixels tall. Optimize your images for the Web.
Name your image files "1.jpg", "2.jpg", etc.
15) Create thumbnails for each image (say, about 50 pixels wide by 40 pixels tall).
Name your thumbnail image files "1t.jpg", "2t.jpg", etc.
16) Place your images and thumbnails in a folder called "slideshow" and upload this folder in place of the demo images.
17) Modify your exercise 8 page:
18) This page must contain the XHTML 1.0 Strict DocType, as follows:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
19) This page must contain links (either buttons or text links) to the HTML and CSS validators. See How to Put HTML and CSS Validate Buttons on Your Page for information on how I want you to to do this. (Use the block of code on this page to make the button links or text links, so that clicking on the links automatically lets you know if the page validates or not.)
20) This page must display your name and say "Exercise 8."
21) This page's <title> must indicate that this is your
exercise 8 page, so it should say something like "John Sky's DM160C Exercise
8".
22) This page must contain a relative link to your home page.
23) Make sure the HTML on this page validates (using the XHTML 1.0 Strict DocType) with no errors, according to the W3C's online HTML Validator at http://validator.w3.org/. You can easily do this by clicking on your HTML validator button. For more information, see How to Use the W3C HTML and CSS Validators for step-by-step directions.
24) Make sure the CSS used with this page validates, with no errors, according to the W3C's online CSS Validator at: http://jigsaw.w3.org/css-validator/validator-uri.html.
Because this Javascript makes use of the opacity property, you will need to validate the CSS using the CSS Level 3 standard, as the new opacity property is not part of CSS 2. See the "For CSS Level 3" section of How to Use the W3C HTML and CSS Validators for the code to use for validator buttons that tell the validator to use CSS 3.
25) If there are any errors, fix them, re-upload the page, and validate it again.
26) Make sure your home page has a working link to all your completed exercises, including this exercise, and that the HTML and CSS on your home page validates.
27) Submit the feedback form. To receive full credit for this exercise you must submit this feedback form before it expires. This exercise is due on 4/19/10. Allowing for a one-day grace period, the form will expire at the end of the day following the due date, which means the form for this exercise will expire at 12:00 AM on 04/21/10.