<!DOCTYPE html>
<html>
<head>
<style type="text/css">body{background-color:#FFF1CC;}
img {padding:1px; border:1px solid;}
</style>
<title>photoviewer</title>
</head>
<body>
<body onload = "main()">
<form>
<h1><u>Photo Viewer</u></h1>
<br><h2><img id="theImage" src="umcp/InitialImage.jpg" alt="viewerImg" /></h2>
Photos' Folder:<input type="text" id=folderName" value="umcp/" /></br>
<br>Common Name:<input type="text" id="myTextField" value="college" /></br>
<br>Start Photo Number:<input type="text" id="startNumber" value="2" />
End Photo Number:<input type="text" id="endNumber" value="4" /></br>
/*user entry*/
<br>Photo Being Displayed:<input type="text" id="displayedPhoto" value="Initiallimage.jpg" /><br>
<input type="button" id="loadPhotosButton" value="Load Photos" />
<input type="button" id="nextPhotoButton" value="Next Photo" />
<input type="button" id="previousPhotoButton" value="Previous Photo" />
<input type="button" id="firstPhotoButton" value="First Photo" />
</form>
<script type="text/javascript">
/*global variables*/
var photosArrayGlobal;
var photoIndexGlobal;
/*main function*/
function main(){
var f = "umcp/";
var c = "photosArrayGlobal";
var x= ("f + c + imageNumber + (".jpg"));
var buttonElement1 = document.getElementById("loadPhotosButton")
buttonElement1.onclick = loadPhotos;
var buttonElement2 = document.getElementById("nextPhotoButton");
buttonElement2.onclick = next;
(k = 0; k <= limit; k++)
var buttonElement3 = document.getElementById("previousPhotoButton");
buttonElement3.onclick = previous;
var buttonElement4 = document.getElementById("firstPhotoButton");
buttonElement4.onclick = firstPhoto;
/*displayPhoto code, use getsetattribute ezxample*/
/*also, displayedPhoto is not a button. how to make it function??*/
var photoTextName = document.getElementById("displayedPhoto");
buttonElement2.onclick = displayPhoto; /*how do the displayedPhoto and nextPhoto elements share the same button?
DO they share the same button??? not described in video*/
/*<.getElementById("displayedPhoto").value idk if this works or where it came from, try again after
photoTextName on line 72>*/
}
/*update photo display*/
function displayPhoto(photo){
var photoTextName = document.getElementById("displayedPhoto");
var currentPhoto = photoTextName.getAttribute("src");
var showPhoto = (photosArrayGlobal + photoTextName);
displayedPhotoValue.onclick = displayPhoto;
/*when someone writes a particular value in the associated text field, it should return the photo
they request as associated with its name. via array or folder itself??*/
// DO NOT PUT ()
}
/*start number and end number*/
function validNumbers(startNumber,endNumber){
var startNumber=0;
var endNumber=0;
This function will return true if startNumber is less than or equal to endNumber, and false otherwise
if (startNumber<=Endnumber);
return "true";
else (return="false");
}
/* ARRAY*/
function createArray(startNumber,endNumber){
var idx=0;
while (idx < numberOfEntries) {
data[idx] = photoIndexGlobal;
idx++;
}
var startNumber=;
var endNumber=;
photosArrayGlobal=newArray();
for (var idx = 0; idx < photosArrayGlobal.length; idx++) {
photosArrayGlobal[idx] = idx;
var totalImages=photosArrayGlobal.length;
return= /*document.getElementById?*/
}
/*Load Photos Button*/
function loadPhotos(){
var imageElement = document.getElementById("theImage")
var currentPhoto = imageElement.getAttribute("src");
/* 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*/
var photoToDisplay = document.getElementById ()
imageElement.setAttribute("src",photoToDisplay);
/*how to associate here with button, if necessary*/
}
/*First Photo*/
function 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*/
/*sends viewer back to first photo in array*/
}
/*next*/
function 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*/
var imageElement = document.getElementById("theImage" + photoIndexGlobal);
var currentPhoto = imageElement.getAttribute("src" + photoIndexGlobal); // retrieving value of src atrribute
var photoToDisplay = imageElement.setAttribute("src" + imageElement);/*photosArrayGlobal.value; Not sure how to write this so that only the specified value is shown*/
}
/*previous*/
function 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*/
var imageElement = document.getElementById("theImage");
var currentPhoto = imageElement.getAttribute("src"); // retrieving value of src atrribute
var photoToDisplay = photosArrayGlobal.value;
imageElement.setAttribute("src", photoToDisplay);
}
</script>
</body>
</html>
Before you post, read our: 
