Building an Image Gallery with Active Client Pages
When you have a web page in front of you that is of an image gallery and your Internet connection is slow, you will notice that, when you click a button or link to see the next image, this next image generally takes a long time to appear. If you read this two-part series, visitors to your web site will no longer have to wait a long time for images to appear in their entirety. Thanks to a new technology called Active Client Pages, abbreviated ACP, only the first image or the first set of images will take a long time to appear on the screen.
Building an Image Gallery with Active Client Pages - The Code (Page 3 of 4 )
For simplicity, we shall consider just five images. This is the skeleton of the web page:
<html>
<head>
<script type="text/javascript">
//statements to display the next image
</script>
</head>
<body>
<! - - table with cell to display one image at a time - - >
<! - - button to click to see the next picture - - >
<! - - the rest of the images tags with display:none - - >
</body>
</html>
You have the HEAD and the BODY elements in the HTML document. The HEAD element has the script, which replaces the image in the cell. The BODY element has the table with the cell. It features a button; when clicked, the button calls a function in the JavaScript that displays the next image. Finally it has tags for all of the images.
Let us look at what is in the BODY element. The code for the table element is:
There is only one cell in the table. If you want your table to be rendered as it arrives at the browser, then give it a column width at the beginning of the table. That is why we have the COL element. Note that the value of the display property of the image tag is “block.” This is the first image, which is downloaded with the visible part of the web page. The visible part of the web page is the part (top) of the page that the user will see first as an entity.
Next in the BODY element, you have a button. The code for this button is:
The nextPic() function is in the script. When you click this button, this function is called. This function replaces the picture that was in the table cell with the next one in the queue.
After the button, you have the queue of image tags. These are the image tags:
Note that the value of the display property of each of the image tags is "none." Each of the image tags has an ID. As the web page is rendered at the browser, all of these images are downloaded when it is their turn to be rendered; however, they are not displayed, since their display property is "none." When they arrive at the browser, they are not displayed. They are displayed whenever they are needed.
Also note that the first image is last in the queue. This is because the first image is already displayed. The images form a sequence and are displayed in that sequence. The first image can only be displayed again after you have finished spanning the queue. Note that in your own project, you can give the possibility of having the images displayed in any order (you will need more code for this).
The file name of the picture begins with “pic,” and is followed by a number in the sequence. The ID of each tag begins with “I,” followed by a number, which is the number in the sequence. The sequence numbering begins from zero.
The JavaScript
This is the script:
<script type="text/javascript">
var num = 1
function nextPic()
{
document.getElementById('TD1').innerHTML = "<img src="images/pic" + num + ".gif" id="I" + num + "" style="display:block">";
num = (num + 1)%5;
}
</script>
There is the num variable. Then you have the nextPic() function. This function has two statements. The first statement sets the innerHTML of the table cell. The value of the innerHTML property is a string. This string is a tag of the image that you want displayed.
Three aspects of this string are the file name, the ID and the value of the display property. It is these aspects that make one tag different from the others. Changing the file name and the ID is easy; just change the number part. This is done with the "num" variable. Changing the value of the display property is also easy; the “display:block” sub string is permanently part of the string for the innerHTML. So by using innerHTML, the first statement replaces the content of the cell, which is the next image in the sequence.
The statement after this is:
num = (num + 1)%5;
Here, the num variable is incremented. The modulus operator is used to make sure that we do not have any number that is greater than 4. Well, in the example code that I will give you, there are just five images, not thirty; however, exactly the same principles apply when there are thirty images. The numbers keep recycling. After the fifth picture is displayed, the first picture will be displayed.
The declaration of the num variable is the first statement in the script. The value 1 is assigned to this variable. When the web page is first displayed, the image with the sequence number 0 is displayed with the web page. This means that the image with the sequence number 1 has to be the next image to be displayed. That is why the number 1 is assigned to num variable num at the beginning of the script.
HTML 
HTML5 Boilerplate Introduction
