By: Al DiMarzio, HB GraphicsGuilford, CT
Many Web sites lead visitors on a "Virtual Tour" of something, which is generally a series of images. These images could illustrate a walk-through of a neighborhood or the rooms of a house, screen shots from an application, or even the site itself. Often this tour turns out to be a long page with too many pictures that take too long to load. But sometimes a virtual tour is just what you need.
In this article we discuss a more efficient presentation of a virtual tour that works with limited-bandwidth connections. Specifically, we present a group of images and text in slide-show fashion using JavaScript. The format is simple; it loads one image at a time and gives the visitor the ability to move back and forth through the show. This approach has been used commercially and can be seen at the Connecticut Rental Center Web site and at the interactive museum tour of The Henry Whitfield State Museum. The images in the example slide show in this article are from my own recent trip to Italy.
Elements of the ProjectSlide show creation involves three elements:
- The Web page that displays the slide show.
- The sample tour data contained in JavaScript arrays.
- The JavaScript tour code that runs the slide show.
I chose to separate these functions because the tour code is generic and can be used over and over. Keep in mind that the data arrays, which contain image file names and comments, can be created in a variety of ways. In this instance, I used a database to organize my information and to create the sample tour arrays. (Other methods of creation might include the use of a word processor or text editor.) The original project that spawned this code contains almost 400 images of 33 locations in Italy.
You will find additional discussion about the virtual tour encapsulated within comment tags in the HTML and JavaScript code segments in this article. Thus you can cut and paste everything into your editor and begin playing on your own. The article starts with the HTML page, works through the sample tour script, and ends up with the tour code script.First, to show you what this virtual tour looks like to your site visitor, here is a quick, five-image tour of the villa "Casale Sonnino," where I stayed in Italy. (Note: We use an onLoad event handler in the image tag to synchronize the appearance of the text. Some Netscape browsers are finicky and don't display the text. If this happens, try clicking again. This problem is discussed more fully in the code comment section.)
And Now, on with the Show
Below you will find the entire working program. This may seem like a lot of code to muddle through, but take it one piece at a time. There are three JavaScripts on this HTML page. The first one is coded on the page itself, and its sole purpose is to declare a variable containing the name of the tour. The other two are brought into the browser by specifying their file name. If you snip the code, be sure to name the JavaScript files as shown in the code segments.
The first section of the code presents the Web page that the viewer will see, along with the functionality to control the slide show. It has been sized to fit in a 640x480 screen with room left to put other things on the same page.
------------ Begin snip of HTML web page ------------- <html> <head> <title></title> <!-- The virtual tour includes two canned scripts and declares a script variable. For simplicity, all files are combined in a single folder. In the real world, however, images and scripts would be in separate folders. --> <script language="JavaScript"> <!-- /* You could list multiple slide shows in an HTML drop-down box, from which the user could select a particular tour. (For an example of the drop-down box concept, see the tutorials section on my Web site: http://www.hbgraphics.com.) */ var tourScript = "Casale_Sonnino_Vinyards"; //--> </script> <!-- These two canned scripts contain the information to be displayed in the tour and the functional code to run the tour. The tour code is generic to any tour. --> <script language="JavaScript" src="sample_tour.js"></script> <script language="JavaScript" src="tour_code.js"></script> </head> <!-- The onLoad event calls a function in the tour code script to load the first image in the series. --> <body bgcolor="#ffffff" onLoad="displayImages()"> <!-- This outer table simply creates a green border around the slide show and packages it as a unit. --> <table border="2" cellpadding="3" cellspacing="0" bordercolor="#006600" width="465"> <tr> <td> <form name="displaycomments"> <!-- Forms are JavaScript objects that contain elements that can be manipulated. We put information in the form's "textarea" by using its "value" attribute, but more on this when you get to the tour code script. Give the form a name so that the tour code script can talk to it. --> <table width="465" border=0 cellpadding="0" cellspacing="0"> <tr valign="top"> <!-- Because the images are contained in an array (sample tour script), we use a dummy, one-bit image as a placeholder to set the topography of the page until the real image is called. Also note that the onLoad event is used in the image tag to prevent the image description being displayed before the image has finished loading. (My son taught me that trick.) And be sure to name the image. JavaScript loves named objects. In the case that a Netscape browser is finicky about the onLoad event handler placed in the image tag, remove the onLoad() function call in the image tag and make the code changes noted in the tour_code.js file. --> <td> <img src="onebit_trans.gif" name="nowshowing" onLoad="javascript:displayTitle()" width=265 height=185 alt="" border="1"></td> <td><textarea name="comments" wrap="virtual" rows="11" cols="20" hscroll="no"></textarea><br></td></tr> <tr> <td colspan="2" align="center"><font face="Arial,Helvetica,sans-serif" size="-1" color="#0000FF"> <!-- Here we make the left and right buttons. You can use some fancy graphics, but these work fine for a demo. --> <a href="JavaScript:turnLeft()"><= Previous</a> <a href="JavaScript:turnRight()">Next =><br></a></td></tr> </table> </form> </td></tr> </table> </body> </html> ------------ End snip of HTML Web page -------------
Next let us examine the two JavaScript arrays that contain the names of the image files and descriptions of the images. Please note that there is a one-to-one correspondence between the position of the image file in its array and the position of the description for that image. If you choose not to have a description for one of the images, you must still maintain the order of descriptions by using an empty description, i.e., "", for the description.
------------ Begin snip of the sample tour -------------
/* file name: sample_tour.js */
/* The sample tour script consists of two arrays, one containing
the images in the correct order and the other containing image
descriptions in the same order. Nothing spectacular here, just data.
NOTE: The arrays must each be all on one line without carriage reutrns.
The code lines below were broken for readability */
Casale_Sonnino_Vinyards_imageFile = new Array("italy-1.jpg", "italy-2.jpg",
"italy-3.jpg", "italy-4.jpg", "italy-5.jpg")
Casale_Sonnino_Vinyards_imageComments = new Array("Casale Sonnino as seen through
the vineyard", "Everywhere we looked, vineyards and hills.",
"Olive trees next to the walkway. One tree produces about 1 liter of oil.",
"You can't see it, but Rome is in the distance.",
"Garden area where I had my morning espresso.")
------------ End snip of the sample tour -------------
OK, you've been patient enough. Here is the good stuff. With careful planning, you can create a variety of slide tours with this one script just by changing the tour information.
------------ Begin snip of tour code -------------
/* file name: tour_code.js */
/* This is the exciting part. It is not brain surgery, just careful
planning. There are three basic concepts at work here: display the image, display
the text, and move left or right. */
var imageIndex = 0; /* Initialize the index to the beginning image */
/* Compute the number of images so you can calculate when
you reach the end of the array and can start over. */
var imageLength = eval(tourScript + "_imageFile").length-1;
var imageFile;
/* Because the onLoad event in the image tag (containing the blank image)
is triggered when the page loads, the code attempts to find an associated
image comment. To prevent the script from trying to display something that
doesn't exist, we set an initial flag, which will be cleared after the very
first image is called via the displayImages() function. */
var flagOne = 0;
/* Check first to see if the browser is capable of displaying
images and then calculate a value for the image file using the
"tourscript" variable and the index number of the image array.
The javaScript eval() function is great for these tasks. */
function displayImages() {
if (document.images) {
imageFile = eval(tourScript + "_imageFile[imageIndex]");
flagOne = 1; /* we clear the flag on the first good image */
/* Here we replace the source of the "nowshowing" image,
on the HTML page, with the file name of the image in the
image array (sample tour script). This causes the image to change. */
document.nowshowing.src = imageFile;
/* For Netscape browsers that are finicky about
the onLoad() event placed in the image tag,
uncomment the line of code below and remove the
onLoad() event handler from the image tag in the HTML document. */
//Call displayTitle();
}
}
/* Now that the image has finished loading, you can
display the contents of the form's "textarea." Here you check to see
that the flag has been reset and then bring in new data
from the sample tour script. */
function displayTitle() {
if (document.images) {
if (flagOne == 1) {
/* There are two parts here. On the left side, you specify
that the form "displaycomments" has a field "comments" with a
value attribute we want to change. On the right you use the eval()
function to create the text by specifying the position in the
imageComments array (sample tour script) and grabbing the text. */
document.displaycomments.comments.value = eval(tourScript + "_imageComments")
[imageIndex];
}
}
}
/* The following two functions either add one or subtract one from the
image index and then call the displayImages() function. The functions also
check to see if the image index is at the end or the beginning
and resets the index accordingly. */
function turnLeft() {
imageIndex--;
if (imageIndex < 0) { imageIndex = imageLength };
displayImages();
}
function turnRight() {
//alert(imageIndex);
imageIndex++;
if (imageIndex > imageLength) { imageIndex = 0 };
displayImages();
}
------------ End snip of the tour code -------------
ConclusionWasn't that fun? Well, you will have fun putting together nifty slide shows on your Web site and wowing your friends and clients. The key is in organizing the data and making sure that the data arrays, names, and contents, are consistent in the Web page and scripts.
As mentioned above, this concept works particularly well on some of today's limited-bandwidth connections. When everyone has DSL or cable modems, we will move on to other techniques, but for now... happy slide showing.
About the AuthorFor additional information about the author, please select Author Biography.