JavaScript Tutorial: Build Your Own Image Viewer with Scrollbar

By Curtis Dicken

http://www.htmlgoodies.com/beyond/javascript/article.php/3870076/JavaScript-Tutorial-Build-Your-Own-Image-Viewer-with-Scrollbar.htm (Back to article)

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 xmlns="http://www.w3.org/1999/xhtml" >

<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();">

&lt;&lt; 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 &gt;&gt;</td>

</tr>

</table>



</body>

</html>