Hello all

I wanted to share a client side solution I just coded for my daughters day care lady. She has a web site but there is not a need for any server side code (since it costs more money on a monthly basis and she really does not have a business need for it). Any way, to make this story short, she wanted an on-line photo album and I thought I was going to have to code a new HTML page for every picture. Instead, I developed this client side JavaScript process using DHTML which allows a user to click on a photo, the photo will then display (the code I will provide does not actually display the photo, instead it just shows the path) but I wanted to get other peoples opinion on it. Normally, I come out to discussion forums when I have issues so this time I just wanted to share a solution I came up with. Any comments or opinions on the code or the business application, I would appreciate hearing. I am always looking to improve.

Thanks

Code:
<html>

<head>

<script language="JavaScript">

function flip()
{        
   if ( document.getElementById("photoDisplay").style.display == "none" )
   {
      document.getElementById("photoList").style.display = "none";
      document.getElementById("photoDisplay").style.display = "inline";
   }
   else
   {
      document.getElementById("photoList").style.display = "inline";
      document.getElementById("photoDisplay").style.display = "none";
   }
}

function getDisplayNum()
{
   return document.getElementById('displayNum').value;
}

function setDisplayNum(num)
{
   var displayNumRef = document.getElementById('displayNum');
   displayNumRef.value = num;
}

function getTotalNumOfPictures()
{
   return document.getElementById('totalNumOfPictures').value;
}

function getImageName(num)
{
   var imageArray = document.photoAlbumForm.imageList.value.split(",");
   
   return imageArray[num];
}

function displayPhoto()
{
   var imageName = getImageName( getDisplayNum() );
   var photoAreaRef = document.getElementById('photoArea');  
   
   //-- build the image tag which will display the image
   //-- use this line when you want the actual photo to appear
   //photoAreaRef.innerHTML = "<img src=images/" + imageName + ">";

   //-- use this line if you want text to appear
   photoAreaRef.innerHTML = "img src=images/" + imageName;
}                            

function Prev()
{
   var prevDisplayNum = getDisplayNum() - 1
   
   if ( prevDisplayNum < 0 )
   {
      prevDisplayNum = getTotalNumOfPictures();
   }
   
   setDisplayNum( prevDisplayNum );
   displayPhoto(); 
}

function Next()
{
   //--- extra math needed to make nextDisplayNum numeric 
   var nextDisplayNum = ( getDisplayNum() - 1 ) + 2; 
   
   if ( nextDisplayNum > getTotalNumOfPictures() )
   {
      nextDisplayNum = 0;
   }  

   setDisplayNum( nextDisplayNum );
   displayPhoto();
}

function selectPhoto(num)
{
   setDisplayNum(num);
   flip();
   
   displayPhoto();
}

</script>

</head>

<body>

<form name="photoAlbumForm">

<div id="photoList">
   <a href="javascript: selectPhoto('0')">Photo 1</a>
   &nbsp;
   <a href="javascript: selectPhoto('1')">Photo 2</a>
   &nbsp;
   <a href="javascript: selectPhoto('2')">Photo 3</a>
</div>

<p>

<div id="photoDisplay" style="display:none">
   <a href="javascript: Prev()">&lt Prev</a> 
   &nbsp;
   <a href="javascript: flip()">Back</a>   
   &nbsp;
   <a href="javascript: Next()">Next &gt</a>
   
   <p>
   
   <div id="photoArea">
   </div>
</div>

<p>

<input type="hidden" name="displayNum" id="displayNum" value="0" />

<!--  value is 0 based -->
<input type="hidden" name="totalNumOfPictures" id="totalNumOfPictures" value="2" />

<!-- comma delimited list of images -->
<input type="hidden" name="imageList" id="imageList" value="Photo1.gif,photo2.gif,photo3.jpg" />

</form>

</body>
</html>