Home arrow HTML arrow Completing an ACP 3D HTML Table Image Gallery

Completing an ACP 3D HTML Table Image Gallery

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.

Author Info:
By: Chrysanthus Forcha
Rating: 5 stars5 stars5 stars5 stars5 stars / 4
August 11, 2009
  1. · Completing an ACP 3D HTML Table Image Gallery
  2. · The Content of the DIV Element
  3. · Content continued
  4. · User Viewing the Gallery for the Second Time

print this article

Completing an ACP 3D HTML Table Image Gallery
(Page 1 of 4 )

ACP Features in 3D HTML Table Images Gallery


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.

blog comments powered by Disqus

- Does HTML5 Need a Main Element?
- Revisiting the HTML5 vs. Native Debate
- HTML5: Not for Phone Apps?
- HTML5 or Native?
- Job Hunting? Freelancer.com Lists This Quart...
- HTML5 in the News
- Report: HTML5 Mobile Performance Lags
- The Top HTML5 Audio Players
- Top HTML5 Video Tutorials
- HTML5: Reasons to Learn and Use It
- More of the Top Tutorials for HTML5 Forms
- MobileAppWizard Releases HTML5 App Builder
- HTML5 Boilerplate: Working with jQuery and M...
- HTML5 Boilerplate Introduction
- New API Platform for HTML5

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 

Developer Shed Affiliates


© 2003-2019 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials