Objectives
To practice JavaScript functions, one-dimensional arrays, events and for loops.
Overview
For this project you will implement a photo viewer that allows you to look at photos available in a folder. Photos can be seen in sequential order (based on the photo's number) or randomly. A video that illustrates the functionality of the application can be found at: Application Video section.
Grading
- (20 pts) Form
- (20 pts) Sequential Slide Show Functionality
- (20 pts) Random Slide Show Functionality
- (20 pts) Implementation of Functions
- (5 pts) Invalid Range Alert
- (5 pts) Good Variable Names
- (5 pts) Good Indentation
- (5 pts) CSS requirement
Notice that you don't have to submit a fully functional application in order to receive credit for this project. We will look at each one of the above items individually. Students that don't use arrays to implement the project will receive 0 credit for the JavaScript component of the project.
Specifications
Before you start implementing the web page, download the following zip file: p4.zip. This file has a folder named p4 which contains files you will need for the project. You need to write your program in a file named p4.html.
Functions
Your project must define and use the functions below:
- main
- getArrayPhotosNames - This function has the following prototype: function getArrayPhotosNames(); This function will read the folder name, common name, start photo number, and end photo number and will return an array with the names of the photos that belong to the specified number range. Each photo's name consists of the folder name, followed by the common name, the photo's number and the ".jpg" extension. You can assume only .jpg files will be provided. Notice you don't need to add "/" (it is assumed the folder name will provide it). After reading the start and end photo numbers the function must check that the end number is larger than or equal to the start number. If that is not the case the message "Invalid Numbers" must be displayed via the alert function.
- randomize - This function has the following prototype: function randomize(dataArray). This function will randomize the contents of the dataArray. You are free to use any approach to randomize the array contents as long as you don't use any JavaScript functions (aside from Math.random()) that randomize the array for you. Notice that this function should randomize any kind of array (e.g., array of numbers, array of strings, etc.).
- Feel free to add any functions you may need.
Global Variables
In this project you will define and use three global variables. We need these global variables in order to keep track of the array of photos being displayed. These are the only global variables you can have in your project. You will lose a significant number of points if you add additional global variables.
- photosArrayGlobal- Represents array of photos being displayed.
- photoIndexGlobal - Represents index of photo being displayed.
- displayGlobal-Represents the img element where we display the photo.
CSS
There will be no css file for this project. Any style information will be provided in the html file (in the head section in between <style></style> tags). The background color for the page is: #FFF1CC. The additional style element you must add is an underline under the Viewer heading and a border around the img element.
Requirements
- Selecting "Slide Show" generates a sequential slide show based on the photo numbers
- Selecting "Random Slide Show" generates a random slide show. Notice that if you continue pressing "Next Slide" eventually you will display the same set of random pictures.
- When the user selects the "Previous Slide" button the previous photo (previous in sequential order or previous in random order) must be displayed. If the currently displayed photo is the first photo then you must display the last photo.
- When the user selects the "Next Slide" button the next photo (next in sequential order or next in random order) must be displayed. If the currently displayed photo is the last photo then you must display the first photo.
- Only pictures in the specified number range should be used in any slide show.
- Your project must work with folders of pictures different from the one (i.e., umcp) we have provided.
- You can assume users have already selected "Slide Show" or "Random Slide Show" when clicking on "Previous Slide" or "Next Slide".
- The next picture should be displayed when we click on the currently displayed image.
- You must use good indentation.
- Your html file must be implemented using XHTML 1.0 (Strict) and must validate according to the http://validator.w3.org/#validate-by-upload validator.
- You may not use any authoring tool (e.g., frontpage, dreamweaver, etc.) which generates the HTML code for you.
- You must implement this project by yourself.
- Do not post your project in a web site (people will see your code).
- Make sure you view your code using Firefox 2.0 (that is the environment we will use to grade your project).
- You do not need to provide any pseudocode.
- You must use good variable names.
Application Video
A video showing the functionality of your system can be found at
Video. A snapshot of the web site's main page is provided below.
