CSCI 4230
Internet Applicaiton Development
Summer 2001
Suggested Solution to Homework #5

(1)    For example:

<%   Option Explicit
 '
 ' h5SlideShow.asp
 ' Kwok-bun Yue July 11, 2001
 '
 ' This program accepts an URL parameter "dir" and use it to
 ' download images and their descriptions.  Images are stored
 ' in the subdirectory "dir".  Descriptions are retrieved
 ' from the table ImageDescription(pathname, filename,
 ' description) with pathname set to the value of "dir".
 '
 ' The page then uses client side Javascript to present
 ' a slide show with two images shown per screen.
 ' No more server-side access will then be needed for
 ' the slide show.
 
 ' Porting variables
 Dim DSN
 DSN = "yue"

 ' Constants
 ' http paramaeter names
 const DIRECTROY_PARAM = "dir"

 ' Get HTTP parameters
 Function GetParameter(Param)
  If (Request.ServerVariables("REQUEST_METHOD") = "POST") Then
   GetParameter = Request.Form(Param)
  Else
   GetParameter = Request.QueryString(Param)
  End If
 End Function

 ' Get HTTP parameters
 Dim strDirectory
 strDirectory = GetParameter(DIRECTROY_PARAM)
 
%>
<html>
<head>
<title>Homework #5, CSCI 4230, Summer 2001</title>
<link rel="stylesheet" type="text/css" href="styles/h5.css">
<script>

// Constants
var prevButton = "prevButton";
var nextButton = "nextButton";

// preload an image.
function preloadImage(imgURL) {
   var a=new Image();
   a.src=imgURL;
   return a;
}

// Showing the progress message.
//  Messages are always <div> in IE and <input> in Netscape.
function showMessage(mess){
    if (document.layers){
  document.messForm.mess.value = mess;
 }
    else if (document.all) {
    message.innerHTML='<div class="message">'+mess+'</div>';
 }
} // showMessage

// Initial indices of images
var lastImage = -1;
var currImage = 0;
var prevImage = 0;
var nextImage = 2;

//  a transparent pixel.
var dotImage = new Image;
dotImage.src = "dot.gif";
//   images and descriptions of all slides.
var slideImages = new Array;
var slideDescriptions = new Array;

// Preload all images by using the records in
//  the table ImageDescription(pathname, filename,
// description).  Pathname is set to strDirectory,
// the user input parameter.  filename is used as
// the image file name and description is used
// for the image file description.
function loadImages() {
    // preloading images.
<% ' read images

 ' Open database connection
 Dim conn
    set conn = Server.createObject("adodb.connection")
    conn.open DSN

 Dim strSql
 strSql = "select filename, description " & _
             "from ImageDescription " & _
       "where pathname = '" & strDirectory & "'"
    Dim count
 count = -1

 Dim ResultRS
 Set ResultRS = conn.execute(strSql)
 if ResultRS.eof then
  Response.write "Sorry, db error. Please contact the administrator."
  Response.end
 else
  do while not ResultRS.eof
   count = count + 1
   ' Write to the arrays for images and descriptions
   Response.write "    slideImages[" & count & "] = preloadImage(""" & _
         strDirectory + "/" & ResultRS.fields("filename") &   _
         """);" & vbCrLf

   Response.write "    slideDescriptions[" & count & "] = """ &    _
         ResultRS.fields("description") &   _
         """;" & vbCrLf
   ResultRS.movenext
  loop
 end if
%>
} // loadImages

// set lastImage.
lastImage = <%= count %>;

// disable button (for IE only)
function setButtonDisability(button, setValue) {
    if (document.all) {
  document.all[button].disabled = setValue;
 }
}

// display images
function displayImages(imageIndex) {
 // update global variables and change buttons
 currImage = imageIndex;
 if (currImage > 0) {
  prevImage = currImage - 2;
  setButtonDisability(prevButton, false);
 }
 else {
  prevImage = 0;
  setButtonDisability(prevButton, true);
 }

 if (lastImage - currImage > 1) {
  nextImage = currImage + 2;
  setButtonDisability(nextButton, false);
 }
 else {
  nextImage = lastImage;
  setButtonDisability(nextButton, true);
 }

 // Show images and descriptions.
    if (document.layers){ // Netscape
  document.images["img1"].src = slideImages[currImage].src;
     document.desc1Form.desc1.value = slideDescriptions[currImage];
  if (currImage < lastImage) {
   document.images["img2"].src  = slideImages[currImage+1].src;
   document.desc2Form.desc2.value = slideDescriptions[currImage+1];
  }
  else {
   document.images["img2"].src  = dotImage.src;
   document.desc2Form.desc2.value = "";
  }
    }
    else if (document.all) { // IE
  document.all["img1"].src = slideImages[currImage].src;
  desc1.innerHTML=slideDescriptions[currImage];
  if (currImage < lastImage) {
   document.all["img2"].src  = slideImages[currImage+1].src;
   desc2.innerHTML=slideDescriptions[currImage+1];
  }
  else {
   document.all["img2"].src  = dotImage.src;
   desc2.innerHTML=" &nbsp;";
  }
 }

} // displayImages
</script>
</head>

<body onload="showMessage('Loading images, please wait...'); loadImages(); displayImages(0);showMessage('Images loaded.  Enjoy!'); ">
<h2>Slide Show Using DHTML & ASP/ADO</h2>
<p>
<script language="javascript">
 if (document.layers) {
  document.write("<form name=\"messForm\"><input type=\"text\" name=\"mess\" size=\"30\"></form>");
 }
 else if (document.all) {
  document.write("<div style=\"position:relative\" class=\"message\" id=\"message\"></div>");
 }
</script>
<p>
Click the buttons for other images:
<p>
<form>
<input type="button" value="First Image" name="firstButton"
    onClick="displayImages(0);">&nbsp;&nbsp;
<input type="button" value="Prev Images" name="prevButton" Disabled
    onClick="displayImages(prevImage);">&nbsp;&nbsp;
<input type="button" value="Next Images" name="nextButton"
    onClick="displayImages(nextImage);">&nbsp;&nbsp;
<input type="button" value="Last Image" name="lastButton"
       onClick="displayImages(lastImage % 2 == 0 ? lastImage : lastImage-1);">&nbsp;&nbsp;
</form>
<p>
<table cellpadding="10" border="1">
<tr>
 <td width="215" valign="top"><img width="200" src="dot.gif" name="img1">
 </td>
 <td width="215" valign="top"><img width="200" src="dot.gif" name="img2">
 </td>
</tr>
<script language="javascript">
 if (document.layers) {
  document.write("</table>\n");
  document.write("<p>First Slide: &nbsp;");
  document.write("<form name=\"desc1Form\"><input type=\"text\" name=\"desc1\" size=\"35\"></form>\n");
  document.write("<p>Second Slide: &nbsp;");
  document.write("<form name=\"desc2Form\"><input type=\"text\" name=\"desc2\" size=\"35\"></form>\n");
 }
 else if (document.all) {
  document.write("<tr><td width=\"215\">\n");
  document.write("<div style=\"position:relative\" id=\"desc1\"></div>\n");
  document.write("</td><td width=\"215\">\n");
  document.write("<div style=\"position:relative\" id=\"desc2\"></div>\n");
  document.write("</td></tr></table>");
 }
</script>
</body>
</html>