Printed from TeacherJohn.com • http://teacherjohn.com/cabrillo/dm160b/exercises/ex07.php

Exercise 7: Slide Show Using JavaScript


Resources for this exercise:


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 should 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 "Slideshow-1.3.2.110508.zip" (or whatever the latest version is). Click this link to download the script.

3) The zip file should expand into a folder on your desktop called "Slideshow". This folder contains:

Let's start by making a minor changes to one of these files. The files are set up with the assumption that the images used in the slideshow will be in your images folder (generally, a fairly safe assumption). However, we will make a change to keep the images used by the slidshow in a subfolder of your images folder.

4) Rename the "images" folder to be called "slideshow" instead of "images".

5) Open the "index.html" file. Note that the DocType is already HTML 5.

6) Find all places where the path to the images folder is indicated, and change the path to point to a subfolder of the images folder called "slideshow". You can easily do this with the "search and replace" feature of a text editor:

Find all instances of:
images/
and change to:
images/slideshow/

7) Save this file as "exercise7.html", as it will become your exercise page.

8) Upload "exercise7.html" to your public_html folder on webhawks.

9) Upload the files contained in the "css" folder into your css folder on webhawks.

10) If you don't already have one, create a "js" folder st the root level of your public_html folder. 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 at your exercise 7 page. You should see the slideshow demo working! Note that the demo gives you six different instances of the slideshow on this one page. Choose the one you like, and delete the other five divs.

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) Name your image files "1.jpg", "2.jpg", etc.

15) All of your images must be optimized for the Web .See How to Optimize Images for the Web to remind you how to optimize your images for the Web.

16) Create thumbnails for each image (say, about 50 pixels wide by 40 pixels tall).

Name your thumbnail image files "1t.jpg", "2t.jpg", etc.

17) Place your images and thumbnails in a folder called "slideshow" and upload this folder in place of the demo images.

18) 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.)

19) This page must include the character encoding meta tag (as explained in Character Encoding for Web Pages). Because this tag tells the browser how to interpret the characters used in the document, it should be the first tag in the <head> section. So right after the <head> tag, place this line of code:

<meta charset="utf-8">

20) This page's <title> must indicate that this is your exercise 7 page, so it should say something like "John Sky's DM61 Exercise 7".

21) This page must contain a relative link to your home page.

22) Make sure the HTML on this page validates (using the HTML 5 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.

23) Make sure the CSS on this page validates, with no errors, according to the W3C's online CSS Validator at: http://jigsaw.w3.org/css-validator/. You can easily do this by clicking on your CSS validator button. See the CSS section of How to Use the W3C HTML and CSS Validators for step-by-step directions.

24) If there are any errors, fix them, re-upload the page, and validate it again.

25) 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.

26) 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 10/27/14. 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 10/29/14.