Completing a 3D HTML Table Image Gallery

The Freezing Mode

The function that does freezing is,

function freezeAuto()

{

//Only manual scrolling should be possible after maximization

manualScrolling = true;

clearInterval(TIDI);

}

freezeAuto means freeze the automatic process at a particular plane. This is the name I have chosen to use; you can give it your own name. The function starts by setting the manualScrolling variable to true. This indicates that the planes can be changed manually. Then it simply stops the DOM “setInterval()” function from re-executing, with the statement:

clearInterval(TIDI);

clearInterval() is also a DOM function. Its purpose, established by the DOM, is to stop the setInterval() function from re-executing. It uses the ID returned by “setInterval()” to achieve its goal. I hope you can now see why the returned ID assigned to the variable is made global.

There are only two statements in the function. As we said, the manualScrolling variable is global. The maximizeFn(ID) and the restoreFn(ID) function have to read this variable before taking certain actions (see below).

The Manual Mode

The aim of this mode is to enable the user to scroll the sets (change the sets) manually. The function is:

function scrollInwardMan()

{

//set manual scroll variable to true

manualScrolling = true;

//stop auto scrolling

clearInterval(TIDI);

scrollInward(); //show next set

}

scrollInwardMan means Scroll Inward Manually. This is the name I chose; you can give it your own name. The function starts by setting the manualScrolling variable to true. The “maximizeFn(ID)” and the “restoreFn(ID)” function have to read this variable before taking certain actions (see below). It then stops the DOM “setInterval()” function from re-executing, with the statement:

clearInterval(TIDI);

Finally it calls the “scrollInward()” function, which has the effect of displaying the next plane. We talked about the scrollInward() function in the first part of this series.

The continueAuto() Function

continueAuto() stands for Continue Automatic process. This is the name I chose to give it; you can give it your own name. The function is,

function continueAuto()

{

scrollInward(); //show next set without waiting for the interval to elapse

scrollInwardCont(); //call the continuous function

}

This is the function that is called when you want to leave the freezing or automatic mode. When you are in the freezing or manual mode, it is assumed that you have seen what you want to see in the present plane. So the function starts by displaying the next plane; calling the “scrollInward()” function achieves that. Next and finally, it calls the scrollInwardCont() function, which puts the page in the automatic mode. So, each time the “scrollInwardMan()” is called, it displays a new plane.

The Buttons Tags

Before we see how the code maximizes and restores images, let us see the tags for the three buttons we spoke about earlier. We have,

<button type="button" onclick="freezeAuto()">Freeze Set</button>

<button type="button" onclick="continueAuto()">Continue Automatically</button>

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

As you can see, these buttons call the functions for the three modes. However, the “Continue Automatically” button is clicked when you want to leave the freezing or manual mode. It returns the page to its default mode.