JavaScript Tutorial: Build Your Own Image Viewer with Scrollbar

By Curtis Dicken

WEBINAR: On-demand webcast

How to Boost Database Development Productivity on Linux, Docker, and Kubernetes with Microsoft SQL Server 2017 REGISTER >


I won’t be covering any of the topics surrounding how the image scrollbar piece works. If you want to learn more about the specific functionality of that piece please take a look at Web Developer Tutorial: Build Your Own Image Scrollbar.

Storing the Data: Creating a Two Dimensional Array

Since we are extending our image scroll bar we need a way to store and retrieve more data than just the paths to our images. We also need the image title and description. The best way to accomplish this is with a two dimensional array.

So, what is a two dimensional array? Think of it as a table. Any table you create has rows and columns. If you were to index your table you would reference each cell by its row and column number. That’s exactly what a two dimensional array is.

Now, you would think that creating a two dimensional array would be as easy as saying something like Array(10,3). While that is the case with some languages it is not that easy with JavaScript. Instead we essentially have to create and array of arrays to get our second dimension. We do this by stepping through our one dimensional imageData array and putting an array in each slot. In order to keep the viewer flexible I created a function (createTwoDimensionalArray) that does exactly that. Its parameter is the size of the second dimension and it loops through the imageData array adding the second dimension.

The array that we are using has 10 rows and 3 columns. The first column holds our image paths, the second column holds our image titles, and the third column holds our image descriptions. Notice the data assignments at the top of the script references row number then column number. I separated the data assignments into 3 sections so it is easier to see how the array works.

Function - changeCellText

This function takes care of updating our title and description data. It finds the cell to update using the same getElementById method that we use throughout our script and sets the innerHTML to the new value. The innerHTML property is what allows you to update content in your table cells.

Function - changeImageAlt

This function changes the alt property for the large image. It combines the image title and description and sets the alt value using setAttribute. Keep in mind you won’t actually be able to see this change in your standard browser.

Function - changeImageTitle

This function changes the title property for the large image. It combines the image title and description and sets the title value using setAttribute. In most browsers this will result in a tooltip with your title and description when you hover over the large image.

Function - changeImageOnMouseOver

This function is responsible for keeping our thumbnail onmouseover events straight. It changes a thumbnail’s onmouseover attribute so that when our handleThumbOnMouseOver function is called the correct row index for our image data array is sent. This function is called from the functions that change the scrollbar thumbnail images.

Function - handleThumbOnMouseOver

This function is the workhorse of our new functionality. It is responsible making the changes to src, alt, title and onmouseover attributes. It uses the row index parameter that is passed to it to find the appropriate data and then calls the changeImage function to change the image, the changeCellText function to change cell text for the title and description, and the functions that handle changing the alt and title attributes.

Updates to Scrollbar Functions

The only real change to the scrollImages function that handles the scrolling of the image scrollbar was the addition of the changeImageOnMouseOver function that updates the onmouseover attribute for the thumbnails. We call the function in the same sequence using setTimeout so that the image src and onmouseover attributes change at the same time. If we don’t keep them on the same time schedule then there is the potential that the user could hover over an image and get a different large image, title and description than the thumbnail the user hovers over. I know, this is not likely to happen but if you choose to slow down the animation effect the potential would be greater.


The most notable changes to the HTML are the addition of cells for the title and description. Each of those cells is assigned a unique ID value so that we can manipulate them in our script. The large image is also assigned a unique ID. I also set the onmouseover attribute for each of the thumbnail images so that they would function as expected when the page is first loaded.


With this script you now have a fully functional image viewer with scrollbar. The script can easily be placed in a JavaScript library for distributed use. You could also extend the functionality even more by adding other specialized data to your two dimensional array like the date the image was taken or a link to a web page. Happy coding!

Page 2 of 2

Previous Page
1 2

Make a Comment

Loading Comments...

  • Web Development Newsletter Signup

    Invalid email
    You have successfuly registered to our newsletter.
Thanks for your registration, follow us on our social networks to keep up-to-date