IST263: Project 3.

Project 3. Description.

Main assignment

I will split the description of the project into two parts: how it should look and what it should do. Please notice that not all interface elements are to be completely functional by the time you complete this assigment (some are not functional at all). You will really complete the slide show page in project 5.

Interface

For your third project you should design and develop a web page that will show a set of pictures to a user. The design is totally up to you and it won't be graded. Below there is a template layout I use to describe all of the required pieces your page should have.

The elements on the layout are:

Picture title and date - this area includes the title of the image as well as information about when (date and time) it was taken, and the camera used. Note that this information will be dynamically changed from picture to picture so please include three elements with an ID, so you can access these elements later and change their contents.
The big area in the middle includes only one big picture. This picture will be changed dynamically so, make sure you can access it as well. Do not forget to set aither width or height of the picture. Otherwise, the slide show will keep resizing the web page if you display pictures of different sizes.
The area on the right of the big image area will include a list of small images. Make this area scrollable if all the images don't fit in. Note that the whole layout is not supposed to resize when images are changed.
The area on the bottom will include a long description of the picture and it also will be dynamically updated.
And finally, the control area in the top right corner should include:
- Button Next.
- The Prev button.
- The Slideshow button.
- An input text element that let's the user specify the amount of seconds between the pictures.
- Next to the input element you should have two tiny buttons (one on top of the other) with arrows up and down.
- You should have a little check box that indicates if the user wants to see the images in cycle or the slide show should be stopped when you reached the last picture on the list.

Functionality

Please define the onclick handler for all thumbnail pictures. All of them should refer to the same function show_image(). The function should display the image which was clicked on in the big area on the left.
Upon clicking on the Next button, the user should be shown the next picture from the list. This button should become disabled when the user reaches the last picture on the list.
The Prev button does completely the opposite job. This button should be disabled from the beginning, but once the user clicked Next it, of course, should become enabled. Upon clicking on the button the user should see the previous image frm the list.
The Slideshow button is not yet functional. But you do need to to not to change the layout of the page later.
For the text element that lets teh userr specify the timout between images in the slide show you should have a onkeypressed event handler set to filter out everything but digits.
By clicking on the up arrow button (next to the text element) you should increase the value within the input box, and upon clicking the down arrow, you should derease decrease. Make sure that this value should always remain greater than zero.

All the information about the images is given to you as a JavaScript array of objects in the following form:

var img_info = new Array (
                                  { fname: "first.jpg", title:"My first picture", date:"Oct 12, 2004",
                                    time:"12:30pm", camera:"Sony", descr:"Log text goes here" },
                                  { fname: "second.jpg", title:"My second picture", date:"Oct 15, 2004",
                                    time:"13:30pm", camera:"Sony", descr:"Another long-long text goes here"},
                                  { fname: "third.jpg", title:"My last picture", date:"Dec 31, 2004",
                                    time:"12:00am", camera:"Canon", descr:""}
                                );

You should automatically generate the contents of the thumbnail area using information from this array. You should also use information from this array when you are showing the next/previous picture from the list. This, for example, can be done using the document.writeln() statement as follows:

for(i=0;i<img_info.length;i++)
   document.writeln("<img src='"+img_info[i].fname+"' width='60px'>");

Note: this example doesn't include any event handlers. It only shows how to make javascript create page contents dynamically using the array of data. Your code will be a little different.

Additional credits

For additional credits you can demonstrate all your abilities to use the JavaScript for dynamic page programming. For example:

Apply filters when one picture is changing another.
You can implement preloading images before they should be displayed in order to avoid waiting for big images to be loaded.
You also can scroll the image list element every time the next/previous button is used.
It would be good to also emphasize the current image from the list with a border.
You can get additional credits for good design as well.

Note: You should have at least 5 different images with their description and everything else in your array. Do not forget to place all your files into your directory on the CIT-PROJECTS server and insert the link to the second project into your index.html page.