JavaScript: Image Viewer

(Updated: 10/15/2006)

JavaScript: Image Browser

Last Updated by: Michael Chiang
Comments to: Holger Hoos

Sources and contributions: This lab was created by Dan Tulpan.

Contents

Objectives
Lab Overview
Before the Lab
During the Lab
Deliverables
Reference Links

Objectives

In this lab you will learn how to create a JavaScript-powered image viewer, which can be embedded easily in your course web page.

You will use JavaScript to generate web pages with dynamic content that contain images and text. You will be able to create a web page like this sample after the lab.

Interested in creating an image browser that will amaze the visitors of your web page? This lab will provide you with the necessary information to achieve this goal. A brief outline of the main learning goals of this lab follows:

Gain experience in the use of JavaScript to dynamically display images.
Understand how to use arrays to index data.
Gain a first, basic understanding of the idea of iteration ('for' loop).
Learn how to use a random number generator to implement random choice.
Understand how to use an auxiliary variable to implement swapping.
Learn how to sort images using indices
Thumbnails button
Source code

Lab Overview

This lab will guide you through JavaScript subtleties to enable you to create dynamic Web-based publications that contain buttons and images.

You will learn advanced JavaScript skills to create a dynamic web page.

Before the Lab

Before the lab you should be familiar with basic computer operation skills, such as how to open a file, create a file, save and close a file, and how to use a text editor, such as Notepad or WordPad, to type and edit a text file. (Both Notepad and WordPad can be found under the Accessories menu: click on the Start button - select Programs - select Accessories - select either Notepad or WordPad.)

Furthermore, you should be familiar with the basic features of Internet browsers such as Firefox, Internet Explorer or Netscape. You should also know how to open local files in your Web browser (in Firefox, select Open File from the File menu, then select your file using the dialog box).

Finally, you are expected to understand the basics of HTML and JavaScript.

Be sure to read all sections of this lab - in particular the "During the Lab" section - prior to your lab session to familiarize yourself with the advanced features of JavaScript you will be learning. Your TA will be evaluating your work at the end of your lab session.

During the Lab

1. Gain experience in the use of JavaScript to dynamically display images.

An image browser is an application that allows someone to see images sequentially by simply pressing navigation buttons. The image browser that you will build during this lab consists of six buttons (Back, Next, Random, Shuffle, Sort, Thumbnails), one text field and an image. Every time a button is pressed, a message will be displayed in the text field. When Back, Next or Random is pressed, the text field will display the descriptive text associated with an image (and a new image will be presented to the viewer). When Shuffle, Sort and Thumbnails are pressed, the text field will display the name of the action performed. You are provided with a simple skeleton for the JavaScript code, which includes the implementation of the actions associated with the Next and Random buttons. In this lab you are asked to add to this skeleton code by implementing additional functions.

2. Understand how to use arrays to index data.

An array can be seen as an ordered arrangement of data elements. Most programming languages use arrays to store and manipulate information. JavaScript is such a programming language, and in this lab you will use arrays to store numbers (integer or real) and strings.

The skeleton provided contains five arrays that store:

the location of the images to be displayed,

/* define array with image locations */
/*-----------------------------------*/
var pics= new Array(num_pics)

the text associated with each image,

/* define array with image text */
/*------------------------------*/
var pics_text = new Array(num_pics)

the heights and the widths of each image and

/* define array with image heights */
/*---------------------------------*/
var pics_height = new Array(num_pics)

/* define array with image widths */
/*--------------------------------*/
var pics_width = new Array(num_pics)

the rank of each image.

/* define array with image order ranks */
/*-------------------------------------*/
var pics_rank = new Array(num_pics)

The rank of the images are consecutive integers that represent the order in which the images will be presented to the viewer. For example, let's assume that image pics[0] has pics_rank[0] = 3, image pics[1] has pics_rank[1] = 2, image pics[2] has pics_rank[2] = 0 and image pics[3] has pics_rank[3] = 1. The order in which the four images will be displayed is: pics[2], pics[3], pics[1] and pics[0] in the increasing order of their ranks.

At the beginning of your code, the pics_rank array is initialized. Each picture will have the rank equal with its position (index) in the pics array.

/* populate the pics_rank[] array*/
/*-------------------------------*/
for (i=0; i<num_pics; i++)
{
pics_rank[i] = i;
}

The piece of code displayed above may contain JavaScript keywords that you have not seen before (e.g. 'for'). The purpose of the next section is to provide you with a brief introduction into the concept of iteration.

3. Gain a first, basic understanding of the idea of iteration ('for' loop).

Let's start this topic with an example. Assume that you must write a very simple JavaScript code that prints on a web page the numbers from 1 to 3. You can easily accomplish this task by writing the following code:

But what happens if someone is asking you to write a JavaScript code that prints on a web page the numbers from 1 to 5000? Writting 5000 document.write() lines is clearly not a good solution. Apparently you need to find a way to repeat the document.write() procedure 5000 times. The 'for' loop allows you to solve the problem as follows:

for (i=0; i<5000; i++)
{
document.write(i);
}

The first line can be read as follows "For each value of i from 0 to 4999, execute the statement from the body of the 'for' loop." The body of a 'for' loop is defined as the set of statements included between braces {}. Note that more than one statement can be placed in the body of a 'for' loop.

Task 1: Add 4 new images [2 marks]

Your first task is to add four new images to the image browser. The source code provided contains JavaScript code for only four images, namely f1.jpg, f2.jpg, f3.jpg and f4.jpg that can be found in the /pictures directory. That directory contains four more pictures, namely f5.jpg, f6.jpg, f7.jpg and f8.jpg. As you can easily notice in the JavaScript code, for each image you must specify its width and height, the image location and the descriptive text associated with each image.

For example, the first image has the following parameters:

pics_width[0] = 100;
pics_height[0] = 100;
pics[0] = "./pictures/f1.jpg";
pics_text[0] = "my text for image 1";

Note: Do not forget to increment the index of each array before adding a new item to it. Otherwise, you will overwrite the content of the previous values.

Implementation of the Next button

The implementation of the behavior for Next button can be found in the function next_image().

function next_image()
{
   current_img = current_img +1;

   if (current_img > num_pics-1)
   {
      current_img = 0;
   }

   document[current_img_name].src = pics[    pics_rank[current_img] ];
   document.form1.text1.value     = pics_text[ pics_rank[current_img] ];
   document.img1.width            = pics_width[ pics_rank[current_img] ];
   document.img1.height           = pics_height[ pics_rank[current_img] ];
}

First, the value stored in the variable current_img is incremented by one. Note that the variable current_img stores the index of the image that is currently displayed. If the incremented value of current_img gets larger than the number of pictures - 1 (first picture has index 0), then we set the current_img to be the one with index zero. Thus all images will be displayed in a circular fashion. After the current_img index has been incremented, the form values of the elements displayed on the main web page are updated to correspond to the current image.

NOTE: When refreshing this page to see the effects of your modifications, use SHIFT+"refresh" instead of just "refresh".

Task 2: Implement the Back button [2 marks]

Your second task is to implement the behavior of the Back button in a similar fashion as we have done for the Next button. The difference lies in the fact that you must decrement the value of the current image index and must check if the index gets lower than zero. If the index becomes negative, than you must set the value of the current image value to be equal with the index of the last image (remember that counting starts from zero).

You must insert your JavaScript code in the function back_image().

4. Learn how to use a random number generator to implement random choice.

The Rand button enables a viewer to select a random image for visualization.

function rand_image()
{
   // avoid displaying the same image twice
   do
   {

      // generate a random image index
      new_img = Math.floor(Math.random()*num_pics);
   }
   while (new_img == current_img);

   current_img = new_img;

   document[current_img_name].src = pics[ pics_rank[current_img] ];
   document.form1.text1.value     = pics_text[ pics_rank[current_img] ];
   document.img1.width            = pics_width[ pics_rank[current_img] ];
   document.img1.height           = pics_height[ pics_rank[current_img] ];
}

An image index is generated at random and the current image index will be updated to the randomly generated one, together with the width, height, source file and the descriptive text associated with the new image index. The code provided contains also a mechanism that ensures that no two identical consecutive image indices will be generated, thus allowing a viewer to look at different randomly generated images every time the Rand button is pressed.

5. Understand how to use an auxiliary variable to implement swapping.

Swapping the values of two variables is an important basic operation that may come handy every once in a while. To better understand how swapping shall be done, imagine the following scenario. You are given two glasses: one has water the other has oil. You must swap the content of the two glasses without mixing the two liquids. You are provided a third glass as a helper. To swap the content of the two glasses with liquids you need to follow a rigorous set of operations:

First you empty the water from the first glass into the third one (which was empty). Now, the first glass is empty.
Then you can pour the oil from the second glass into the first one. Half of the job is done.
Last, you pour the water from the third (auxiliary) glass into the second, and the job is done.

Figure 1: Swapping

In the same manner as described above, someone can exchange the values of two variables in JavaScript or any other programming language.

Task 3: Implement the Shuffle button [2 marks]

Your third task is to implement the behavior associated with the Shuffle button. The Shuffle button allows a viewer to shuffle the order in which images will be displayed on your web page. First let us recall that the order in which images will be displayed on the web page is dictated by the ranks of the images stored in the pics_rank array. Here is a brief description of how you may attempt to solve this problem.

for each image i {
     generate a random image rank between i+1 and num_pics - 1
     swap the rank of image i with that of the randomly generated one
  }

You must modify the JavaScript code in the function shuffle_images().

6. Learn how to sort images using indices

Task 4: Implement the Sort button [2 marks]

Your fourth task is to implement the behavior associated with the Sort button. The Sort button allows a viewer to sort the order in which images will be displayed on your web page. Sorting the order in which images will be presented to the viewer is a very easy task. Thus, we will provide you with a hint and you will come up with the solution. Remember that images are displayed according to their corresponding ranks. So, you may need to organize the ranks of the pictures such that images will be displayed in the correct order.

You must insert your JavaScript code in the function sort_images().

7. Thumbnails button (optional)

The Thumbnails button allows a viewer to display the thumbnails view of all pictures in the directory /pictures. The thumbnail of a picture is the 'shrunken' version of the original picture.

Here, a thumbnails view can be implemented as an HTML table. Feel free to choose the number of columns in the table and height and width of the cells. In each cell of the table you can insert one picture and the pictures can be inserted in order, according to their ranks. The width and the height of the picture may not be the same and they may also be different than the width and the height of the cells. You can adjust the width and the height of each picture to be displayed as a thumbnail, so that either their width or their height (which ever is greater) equals the width or the height of the cell. For example if the width and the height of the cell is 100 pixels and you must include in it the thumbnail of a picture of height 200 and width 150, you can set the height of the picture to be 100 and you can adjust its width so that the aspect ratio (width / height) remains unchanged, thus still being able to display a "recognizable picture" as thumbnail.

You must insert your JavaScript code in the function thumb_images().

8. Source code

The source code of this lab (my_image_viewer.html) can be found here.

The images provided in this lab must be placed in a separate directory called /pictures, which shall reside in the same location where the my_image_viewer.html file resides. The image files are:

f1.jpg	f2.jpg	f3.jpg	f4.jpg
f5.jpg	f6.jpg	f7.jpg	f8.jpg

Note: These pictures have been taken in the Butterflies Gardens, Victoria, BC. More information can be found here.

Deliverables

Complete tasks 1 to 4 and show the results to your TA.
Demonstrate your understanding of concepts and skills covered in this lab by answering questions asked by your TA. [2 marks]

Reference Links

1. The Complete Free Guide To HTML

2. Introduction to Web Design http://wdvl.internet.com/Authoring/HTML/Tutorial/

3. Web Page Validator - Check to make sure your web page conforms and has valid links - http://webxact.watchfire.com/

4. http://www.a1javascripts.com/

5. Doc JavaScript -- JavaScript Tutorials, JavaScript Tips, and JavaScript Tools

6. Java.sun.com

7. Web Monkey