Welcome to the second part of a three-part article on building an image gallery in a 3D HTML table. With an image gallery, it is natural that viewers may want to maximize certain images for closer examination, and then restore them to their original size. This article will show you how to add this feature and others to your gallery.
Handling Images in a 3D Table Image Gallery - Operation from the Programmer’s Point of View (Page 5 of 5 )
We are still using the 3 X 3 X 3 HTML table. All the code we have written stays. We shall add more code.
We shall have an onload event in the HTML BODY element. When the page is loaded, the onload event will call a function that will start the automatic changing of the planes. The DOM “setInterval()” function is the main statement for this automatic process.
The button that will cause freezing will have the title “Freeze Set.” When this button is clicked, it will call a function. The DOM function “clearInterval()” is the main statement of this function. It stops the above timing function.
The button that will cause the resumption of automatic changing will have the title “Continue Automatically.” This function will display the next plane, and call the function called when the page is loaded.
The button that causes manual changing stops the automatic function called when the page is loaded, and then it displays the next plane.
The “maximizeFn(ID)” function we saw, which maximizes an image, now begins with a new statement that stops the automatic behavior. It does not make sense if an image is maximized while the planes are changing. The “restoreFn(ID)” function resumes the automatic behavior depending on the page's previous mode.
We take a break here and continue in the next and last part of the series.
DISCLAIMER: The content provided in this article is not warranted or guaranteed by Developer Shed, Inc. The content provided is intended for entertainment and/or educational purposes in order to introduce to the reader key ideas, concepts, and/or product reviews. As such it is incumbent upon the reader to employ real-world tactics for security and implementation of best practices. We are not liable for any negative consequences that may result from implementing any information covered in our articles or tutorials. If this is a hardware review, it is not recommended to open and/or modify your hardware.
HTML 
Maximizing and Restoring HTML Images: Layer Method
