JAVASCRIPT

An Example Image Gallery with Chrys`s Approach to ACP

This is the seventh part of my series "Active Client Pages, Chrys’s Approach." In this part of the series, we look at how the Document Phase can help us with images. You need good knowledge of HTML, JavaScript and Perl in order to understand this part of the series.

Author Info:

By: Chrysanthus Forcha

Poor Best

Rating:

/ 1

August 14, 2009

TABLE OF CONTENTS:

Let us look at the script details now. There are three images. The first one, with the ID "I0," is displayed first. The one with ID "I1" is displayed next, and the one with the ID "I2" is displayed third. When you click the button, one of the images is displayed; clicking the button again will display the next image; and so on -- it keeps revolving, in order. As we said, as soon as the third page is displayed, the first image is shown, since the value for its display property is "block." Only one image has the value of "block" at any time.

The nextPicture() function uses the IDs of the images to display them. In the function, we need two variables for the image IDs. One of the variables is presentID. This holds the ID of the image whose display property value is "block." That is, it holds the value of the ID of the image that is currently displayed.

The other variable is nextID. It holds the ID of the next image that will be displayed. The order for the IDs of the images displayed are: "I0," "I1" and "I2," repeating. When the third page is first displayed, the image whose ID is "I0" is automatically shown. So the value "I0" is assigned to the presentID variable. The ID of the next image to be displayed is "I1," so that value is assigned to the nextID variable.

In order to display the different images in revolving order, we need to form the IDs. The numb variable is used for this purpose. It is initialized to 1.

The presentID, nextID and numb variables are initialized outside the nextPicture() function, but within the script.

Let us now look at the nextPicture() function. The first statement changes the value of the display property of the image that is currently displayed to "none." At that moment, no image is displayed. If the cell housing the image had not been given any dimensions, it would collapse at this moment. Because of this, the other elements in the web page would momentary change (jump) their positions. To prevent this, I gave the cell definite width and height values. This moment is very short though, and it may go unnoticed. The next statement in the function changes the value of the display property of the next image to "block."

The present ID should now be the next ID. The next statement in the function does this. Each ID begins with "I" followed by a number. The numb variable is then incremented by 1. The statement after that forms the ID of the nextID variable. Note the expression with the modulus operator, % in the statement. This expression ensures that no number is ever greater than 2.

That is it for the third page's script.

The last statement in the Perl file in the server returns the string that is in the qq{} operator. This Perl file is an executable file. When the file is called, via Ajax, it forms the string and returns it (sends it to the browser).

That is it for this part of the series. In the next part of the series, we shall look at the summary of the Document phase of Chry’s Approach to ACP.

DISCLAIMER: The content provided in this article is not warranted or guaranteed by Developer Shed, Inc. The content provided is intended for entertainment and/or educational purposes in order to introduce to the reader key ideas, concepts, and/or product reviews. As such it is incumbent upon the reader to employ real-world tactics for security and implementation of best practices. We are not liable for any negative consequences that may result from implementing any information covered in our articles or tutorials. If this is a hardware review, it is not recommended to open and/or modify your hardware.