Introduction
In my last article I showed you how to make a space saving image scrollbar complete with a pseudo animation effect. In this article we are going to extend the image scrollbar into a full image viewer with scrollbar. We will add functionality to change the large image, image title and image description when you hover over the thumbnail images in the scrollbar. The key topics covered in this project include the two dimensional Array, innerHTML, setAttribute, setTimeout and onmouseover.
The JavaScript Scrollbar Code
<html > <head> <title>Scroll Bar Example</title> </head> <body onload="javascript:preloadThumbnails()"> <script language="javascript" type="text/javascript"> // Array of image data var imageData= new Array(10) createTwoDimensionalArray(3); // Image path data imageData[0][0]="image1.png"; imageData[1][0]="image2.png"; imageData[2][0]="image3.png"; imageData[3][0]="image4.png"; imageData[4][0]="image5.png"; imageData[5][0]="image6.png"; imageData[6][0]="image7.png"; imageData[7][0]="image8.png"; imageData[8][0]="image9.png"; imageData[9][0]="image10.png"; // Image title data imageData[0][1]="Grasslands"; imageData[1][1]="Tree Canopy"; imageData[2][1]="In the Clouds"; imageData[3][1]="Sunflower Bud"; imageData[4][1]="Morning Dew"; imageData[5][1]="Hillside Tree"; imageData[6][1]="Winter Wonderland"; imageData[7][1]="Mountain View"; imageData[8][1]="Babbling Brook"; imageData[9][1]="Wooded Trail"; // Image description data imageData[0][2]="This is the description for the first image. Here will be where we give details on the image that is currently being viewed."; imageData[1][2]="This is the description for the second image. Here will be where we give details on the image that is currently being viewed."; imageData[2][2]="This is the description for the third image. Here will be where we give details on the image that is currently being viewed."; imageData[3][2]="This is the description for the fourth image. Here will be where we give details on the image that is currently being viewed."; imageData[4][2]="This is the description for the fifth image. Here will be where we give details on the image that is currently being viewed."; imageData[5][2]="This is the description for the sixth image. Here will be where we give details on the image that is currently being viewed."; imageData[6][2]="This is the description for the seventh image. Here will be where we give details on the image that is currently being viewed."; imageData[7][2]="This is the description for the eighth image. Here will be where we give details on the image that is currently being viewed."; imageData[8][2]="This is the description for the ninth image. Here will be where we give details on the image that is currently being viewed."; imageData[9][2]="This is the description for the tenth image. Here will be where we give details on the image that is currently being viewed."; // Our index, boundry and scroll tracking variables var imageIndexFirst = 0; var imageIndexLast = 3; var continueScroll = 0; var maxIndex = 9; var minIndex = 0; // This function creates our two dimensional array function createTwoDimensionalArray(arraySize) { for (i = 0; i < imageData.length; ++ i) imageData[i] = new Array(arraySize); } // This function preloads the thumbnail images function preloadThumbnails() { imageObject = new Image(); for (i = 0; i < imageData.length; ++ i) imageObject.src = imageData[i][0]; } // This function changes the text of a table cell function changeCellText(cellId,myCellData){ document.getElementById(cellId).innerHTML = myCellData; } // This function changes the images function changeImage(ImageToChange,MyimageData){ document.getElementById(ImageToChange).setAttribute('src',MyimageData) } // This function changes the image alternate text function changeImageAlt(ImageToChange,imageData){ document.getElementById(ImageToChange).setAttribute('alt',imageData) } // This function changes the image alternate text function changeImageTitle(ImageToChange,imageData){ document.getElementById(ImageToChange).setAttribute('title',imageData) } // This function changes the image onmouseover function changeImageOnMouseOver(ImageToChange,imageIndex){ document.getElementById(ImageToChange).setAttribute('onmouseover','handleThumbOnMouseOver(' + imageIndex + ');') } // This function hanles calling on change function // for a thumbnail onmouseover event function handleThumbOnMouseOver(imageIndex){ changeImage('imageLarge',imageData[imageIndex][0]); changeCellText('imageTitleCell',imageData[imageIndex][1]); changeCellText('imageDescriptionCell',imageData[imageIndex][2]); changeImageAlt('imageLarge',imageData[imageIndex][1] + ' - ' + imageData[imageIndex][2]); changeImageTitle('imageLarge',imageData[imageIndex][1] + ' - ' + imageData[imageIndex][2]); } // This function handles the scrolling in both directions function scrollImages(scrollDirection) { // We need a variable for holding our working index value var currentIndex; // Determine which direction to scroll - default is down (left) if (scrollDirection == 'up') { // Only do work if we are not to the last image if (imageIndexLast != maxIndex) { // We set the color to black for both before we begin // If we reach the end during the process we'll change the "button" color to silver document.getElementById('scrollPreviousCell').setAttribute('style','color: Black') document.getElementById('scrollNextCell').setAttribute('style','color: Black') // Move our tracking indexes up one imageIndexLast = imageIndexLast + 1; imageIndexFirst = imageIndexFirst + 1; // Change next "button" to silver if we are at the end if (imageIndexLast == maxIndex) { document.getElementById('scrollNextCell').setAttribute('style','color: Silver') } // Changescrollbar images in a set delay sequence to give a pseudo-animated effect currentIndex = imageIndexLast; changeImage('scrollThumb4',imageData[currentIndex][0]); changeImageOnMouseOver('scrollThumb4',currentIndex); currentIndex = imageIndexLast - 1; setTimeout("changeImage('scrollThumb3',imageData[" + currentIndex + "][0])",25); setTimeout("changeImageOnMouseOver('scrollThumb3'," + currentIndex + ")",25); currentIndex = imageIndexLast - 2; setTimeout("changeImage('scrollThumb2',imageData[" + currentIndex + "][0])",50); setTimeout("changeImageOnMouseOver('scrollThumb2'," + currentIndex + ")",50); currentIndex = imageIndexLast - 3; setTimeout("changeImage('scrollThumb1',imageData[" + currentIndex + "][0])",75); setTimeout("changeImageOnMouseOver('scrollThumb1'," + currentIndex + ")",75); // Wait and check to see if user is still hovering over button // This pause gives the user a chance to move away from the button and stop scrolling setTimeout("scrollAgain('" + scrollDirection + "')",1000); } } else { // Only do work if we are not to the first image if (imageIndexFirst != minIndex) { // We set the color to black for both before we begin // If we reach the end during the process we'll change the "button" color to silver document.getElementById('scrollPreviousCell').setAttribute('style','color: Black') document.getElementById('scrollNextCell').setAttribute('style','color: Black') // Move our tracking indexes down one imageIndexLast = imageIndexLast - 1; imageIndexFirst = imageIndexFirst - 1; // Change previous "button" to silver if we are at the beginning if (imageIndexFirst == minIndex) { document.getElementById('scrollPreviousCell').setAttribute('style','color: Silver') } // Change scrollbar images in a set delay sequence to give a pseudo-animated effect currentIndex = imageIndexFirst; changeImage('scrollThumb1',imageData[currentIndex][0]); changeImageOnMouseOver('scrollThumb1',currentIndex); currentIndex = imageIndexFirst + 1; setTimeout("changeImage('scrollThumb2',imageData[" + currentIndex + "][0])",25); setTimeout("changeImageOnMouseOver('scrollThumb2'," + currentIndex + ")",25); currentIndex = imageIndexFirst + 2; setTimeout("changeImage('scrollThumb3',imageData[" + currentIndex + "][0])",50); setTimeout("changeImageOnMouseOver('scrollThumb3'," + currentIndex + ")",50); currentIndex = imageIndexFirst + 3; setTimeout("changeImage('scrollThumb4',imageData[" + currentIndex + "][0])",75); setTimeout("changeImageOnMouseOver('scrollThumb4'," + currentIndex + ")",75); // Wait and check to see if user is still hovering over button // This pause gives the user a chance to move away from the button and stop scrolling setTimeout("scrollAgain('" + scrollDirection + "')",1000); } } } // This function determines whether or not to keep scrolling function scrollAgain(scrollDirection) { if (continueScroll == 1) { scrollImages(scrollDirection); } } // This function kicks off scrolling down (left) function scrollPrevious() { continueScroll = 1; scrollImages('down'); } // This function kicks off scrolling up (right) function scrollNext() { continueScroll = 1; scrollImages('up'); } // This function stops the scrolling action function scrollStop() { continueScroll = 0; } </script> <table border="0" cellpadding="5" cellspacing="0" width="700px"> <tr> <td align="center" colspan="6" style="font-weight: bold; font-size: 18pt; color: silver; background-color: maroon" id="imageTitleCell"> Grasslands</td> </tr> <tr> <td align="center" colspan="6" style="background-color: maroon"> <img height="400" src="image1.png" style="border-right: 1px solid; border-top: 1px solid; border-left: 1px solid; border-bottom: 1px solid" width="400" id="imageLarge" alt="default" /></td> </tr> <tr> <td align="left" colspan="6" style="padding-right: 100px; padding-left: 100px; color: white; background-color: maroon" id="imageDescriptionCell"> This is the description for the first image. Here will be where we give details on the image that is currently being viewed.</td> </tr> <tr> <td id="scrollPreviousCell" style="color: Silver" onmouseover="scrollPrevious();" onmouseout="scrollStop();"> << Previous</td> <td> <img id="scrollThumb1" height="100" src="image1.png" style="border-right: 1px solid; border-top: 1px solid; border-left: 1px solid; border-bottom: 1px solid" width="100" onmouseover="handleThumbOnMouseOver(0);" /></td> <td> <img id="scrollThumb2" height="100" src="image2.png" style="border-right: 1px solid; border-top: 1px solid; border-left: 1px solid; border-bottom: 1px solid" width="100" onmouseover="handleThumbOnMouseOver(1);" /></td> <td> <img id="scrollThumb3" height="100" src="image3.png" style="border-right: 1px solid; border-top: 1px solid; border-left: 1px solid; border-bottom: 1px solid" width="100" onmouseover="handleThumbOnMouseOver(2);" /></td> <td> <img id="scrollThumb4" height="100" src="image4.png" style="border-right: 1px solid; border-top: 1px solid; border-left: 1px solid; border-bottom: 1px solid" width="100" onmouseover="handleThumbOnMouseOver(3);" /></td> <td id="scrollNextCell" style="color: Black" onmouseover="scrollNext();" onmouseout="scrollStop();"> Next >></td> </tr> </table> </body> </html>