Building an Image Gallery in a 3D HTML Table

There is a button with the title of “Next Set” at the bottom of the table. “Next Set” means click to see the next set of minimized images in the next plane. The code for the button is:

<button type="button" onclick="scrollInward()">Next Set</button>

The “ScrollInward()” function is called each time you click the “Next Set” Button.

The scrollInward() Function

This function has a global variable called "present." This is an integer. Its initial value is zero. This variable shows the index of the plane that is currently displayed. I call the plane displayed the Present Plane.

When the function is called, it goes into a for-loop to scan the rows of the present plane. Inside this for-loop is another loop to scan the columns of the present plane.

Inside this second for-loop, the ID of the single-row table is formed using the row index and the column index of the present plane. The value of the display property of the cell of the single-row table in the present plane is changed to “none.” One is added to the "present" variable, and the result is assigned to an inner variable, k. This inner variable is used to give the value “block” to the next cell of the single-row table. This is the “scrollInward()” function with its global variable:

var present = 0; //for changing vertical planes

function scrollInward()

{

for (i=0; i<3; i++)

{

for (j=0; j<3; j++)

{

//form the inner table IDs

TID = 'T' + i +j

document.getElementById(TID).rows[0].cells[present].style.display = "none";

var k = present + 1;

if (k==3)

k = 0;

document.getElementById(TID).rows[0].cells[k].style.display = "block";

}

}

present+=1;

if (present == 3)

present = 0;

}

After the for-loops, the "present" variable is incremented, so that the next time the function is called (with a button click) the next plane will be addressed. In our example there are only three planes. Our last plane is plane 2, not plane 3, since the counting of the planes begins from zero. So after incrementing the "present" variable, we check to see if it becomes 3. If it becomes 3, we reset it to 0, the first index.

Let us have a break here. In the next part, we will start by learning how to maximize and restore the images in the 3D table.