Building an Image Gallery in a 3D HTML Table - 3D HTML Table: a Closer Look
(Page 2 of 4 )
Planes
You can consider the cells to be in a 3D grid with horizontal and vertical planes. The vertical planes should be seen as 2D tables, one behind the other, going into the page. The counting of the planes begins from zero. The first plane is plane 0, the second is plane 1, the third is plane 2, and so on.
Indices
The counting of all indices begins from zero. I use the variable i to denote the index for a row in the normal 2D table; the variable j to denote the index for a column in the normal 2D table; and the variable k to denote the index for a vertical plane in the 3D table. This gives an index order of (i, j, k).
Seeing 3D Contents on a 2D Screen
We have a 3D table. How do you see the content of each cell on a 2D screen? The table has been arranged into vertical planes. You see the cell contents plane by plane, but not all the planes at once. All of the cells of the plane that are to be seen have the value of “block” for their CSS Display property. The rest of the cells in the other planes have the value of “none” for their CSS Display property. When an HTML element has a display property of “block,” it can be seen on screen. When an HTML element has a display property of “none,” it is not seen on screen and does not occupy space.
A Table Example
I will use a 3 X 3 X 3 table for the illustration. That is, there will be three rows and three columns in each plane, and there will be three planes. The cells of the first plane have the Display property value of “block” initially. This can be changed to “none,” while the value for another plane is changed to “block,” by JavaScript. The content of each cell is an image tag. All of the images can be different.
Operation from the User’s Point of View
There is an HTML button at the bottom of the 3D table. When you click the button, you see the contents of the next plane. When the last plane is reached, and you click the button, you will see the first plane. Clicking the button will repeat the process. The pictures in the planes are small in size. When you click a picture it enlarges itself. When you click the picture again, it goes back to its small size at its cell position in the plane.
In the next part of the series I will show you how you can scan the plane automatically while keeping the ability to maximize and restore the images.
Next: The Table Code >>
More HTML Articles
More By Chrysanthus Forcha
