Handling Images in a 3D Table Image Gallery
(Page 1 of 5 )
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.
Maximizing and Restoring the Images
There are different methods of maximizing and restoring an image. The method I summarize here is my favorite.
Summary
The image to be maximized is given the CSS “position:absolute” property.
The image to be maximized should not be given the CSS Left and Right properties.
The image to be maximized is given a z-index that is higher than those of its surrounding elements.
The dimensions of the image are increased to maximize it.
The vertical align property of the parent element, possibly the TD element, should be given a value of “top.”
To restore, reverse the third and fourth points above. You may also give the image the CSS “position:relative” property.
There are three functions involved. The first function works with a global variable called maximized. It can have the value true or false. When it is true, it means that the image clicked has to be maximized. When it is false, it means that the image has to be restored.
This variable is used by the other two functions. The variable is initialized to false, meaning that the image is initially restored. This is the function and its global variable.
var maximized = false;
function maxRest(ID)
{
if (maximized == true)
restoreFn(ID);
else
maximizeFn(ID);
}
The function is called when you click an image. Recall that each image tag has an ID. When an image is clicked, the event calls this function, sending the ID of the image clicked as an argument. When this function is called, it checks to see if the maximized variable is true. If it is true, it calls the “restoreFn(ID)” function; if it is false, it calls the “maximizeFn(ID)” function. The “maximizeFn(ID)” function maximizes the image. The restoreFn(ID) function restores the image. So each time you click the image, it is either maximized or restored.
Next: Functions >>
More HTML Articles
More By Chrysanthus Forcha
