Completing an ACP 3D HTML Table Image Gallery
(Page 1 of 4 )
Welcome to the second part of a two-part series that explains how to set up a three-dimensional HTML image gallery using Active Client Pages (ACP). In this part of the series, among other things, we'll get a close look at the JavaScript that helps to keep things running smoothly.
ACP Features in 3D HTML Table Images Gallery
Introduction
In the previous part of the series, the images were downloaded to fit into the table. In other words the tag for each image is in a table cell of the 3D HTML table. With ACP you download what the user has to see first. After this, the other things the user needs to see are downloaded as the user views the initial content of the page.
Remember, for this series we have just one page. So the first set of images are downloaded initially with the 3D table; additionally, the tags for the first set of images are downloaded in the cells of the first plane of the 3D table.
The tags for the images of the other planes are placed in the web page, below the 3D table (not in the cells of the 3D table), in the order in which they appear in the planes. These are downloaded later than the 3D table in the page. Script is used to fit the tags into the cells of the second plane and the planes after the second.
These images at the bottom are actually in a DIV element. The value of the display property of this DIV element is “none.” So the DIV element is not seen and it does not occupy space in the web page. This means the images in the DIV elements are also not seen and do not occupy space in the web page (note that the value of the display property of these tags is "block;" they are not seen because they are in the DIV element).
In this part of the series I explain how to place your image tags and the JavaScript that manages them.
How fast operation comes about
The need for ACP here, for fast operation, is because images take a long time to download. To explain what I said above, as soon as the web page is displayed, the user has some images to see. By the time the user wants to see the images for the second plane, they would have been downloaded. By the time he wants to see those for the third plane, they would also have been downloaded. In this way, the operation of the image gallery, from the point of view of the user, is fast.
In a way, we have tricked the user. With a conventional image gallery the user may have to wait for all of the images to be downloaded before he starts using the gallery. Otherwise, when he clicks a link (an element) to see an image, he has to wait for the image to be downloaded before he sees it. With ACP, the user has to wait only for the first set of images to be downloaded. He does not wait for the other images to be downloaded, as they are downloaded in the background without him knowing. So the operation of the gallery appears fast.
We know that when the browser downloads an image, it caches the image; whenever you need the image in that session, for a different page, it will be taken from the cache and not from the server, and the download time is omitted. We also assume that the user has to see the first set of images, first, before he goes on to see the next set. So when the user types the address of the page in his address bar of his browser, he would see the first set of images with the initial (top) part of the web page; while he is viewing it, we have the rest of the images downloaded in the background.
The presence of the tags below the 3D table (in the DIV element) downloads the rest of the images. To download an image, all you need is the tag; the small problem with this is that the mouse pointer becomes an arrow and hourglass while the image is being downloaded. This is not a big deal.
Next: The Content of the DIV Element >>
More HTML Articles
More By Chrysanthus Forcha
