Objectives

Overview

This project has two parts. First, you will implement a photo viewer that allows you to look at photos available in a folder. Photos will be shown in sequential order (based on the photo's number). A video illustrating the functionality of the application can be found at Application Video section. For you the second part you will provide a presentation about a research topic using the photo viewer you designed.

Grading

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.

Specifications

Before you start implementing the web page, download the following zip file p3.zip. This file has a folder named p3 which contains files you will need for the project. You need to write your program in a file named PhotoViewer.html.

Global Variables

In this project you will define and use two global variables (variables defined outside of any function). 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. Remember that a global variable can be accessed by any function. This is how functions will be able to share information about the photos being displayed. Define the global variables immediately after the <script> tag.

Functions

Next we are providing a description of functions you should have in your implementation. Only three functions are required: main, createArray, and loadPhotos. We are presenting the functions in the order we understand they should be implemented. Feel free to add any functions you understand are necessary or to ignore the non-required ones. We strongly recommend that you test each function individually.

  1. main - This function will associate buttons on the form with functions in your code. This function needs to be called via the onload event handler in the <body> tag
  2. displayPhoto(photo) - This function will update the photo being displayed with the specified photo parameter. For example, calling displayPhoto("umcp/college3.jpg") will display the umcp/college3.jpg photo
  3. validNumbers(startNumber, endNumber) - This function will return true if startNumber is less than or equal to endNumber, and false otherwise
  4. createArray(startNumber, endNumber) - This function will create and return an array with a size that corresponds to the parameter values provided. For example, calling createArray(3, 7) returns an array with 5 elements. The array will have no values assigned to it
  5. loadPhotos() - This function will be called when the "Load Photos" button is selected. The function will read the folder's name,common's name, start photo number, and end photo number and initialize the photosArrayGlobal array with the names of photos that belong to the specified number range. The first photo in the range will be displayed and the "Photo Being Displayed" text field will display the full name of the photo

    Each photo's name consists of the folder's name, followed by the common's 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, and no further processing will take place. To create the array you must use the createArray function described above. To verify the validity of the numbers provided, you must use the validNumbers function described above. Make sure you initialize the photoIndexGlobal to 0 (first photo in the array)
  6. firstPhoto - This function will be called when the "First Photo" button is selected. It will display the first photo in the array. It is assumed that the loadPhotos function has already being called. The "Photo Being Displayed" text field needs to be updated accordingly
  7. next - This function will be called when the "Next Photo" button is selected. It will display the next photo in the array. If the last photo is being displayed, then the first one should be displayed. It is assumed that the loadPhotos function has already being called. The "Photo Being Displayed" text field needs to be updated accordingly
  8. previous - This function will be called when the "Previous Photo" button is selected. It will display the previous photo in the array. If the first photo is being displayed, then the last one should be displayed. It is assumed that the loadPhotos function has already being called. The "Photo Being Displayed" text field needs to be updated accordingly
  9. Feel free to add any functions you may need

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 (double) around the img element.

Photo Viewer Requirements

Research Topic Presentation

You will research how computing and increasingly interconnected information sources have changed the set of problem solving and research skills needed by society during the last decade. The results of your research work should be presented using a set of photos/slides that can be shown through the photo viewer you designed for this project. Put your presentation in a folder named research and named all the photos/slides with the names research1.jpg, research2.jpg, etc. Regarding the presentation:

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.

Snapshot main page

Web Accessibility