Home arrow HTML arrow Handling Images in a 3D Table Image Gallery
HTML

Handling Images in a 3D Table Image Gallery


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.

Author Info:
By: Chrysanthus Forcha
Rating: 5 stars5 stars5 stars5 stars5 stars / 1
February 09, 2009
TABLE OF CONTENTS:
  1. · Handling Images in a 3D Table Image Gallery
  2. · Functions
  3. · Image Resolution
  4. · Automatically Changing Images in a 3D HTML Table Gallery
  5. · Operation from the Programmer’s Point of View

print this article
SEARCH DEVARTICLES

TOOLS YOU CAN USE

advertisement
Handling Images in a 3D Table Image Gallery
(Page 1 of 5 )

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.


blog comments powered by Disqus
HTML ARTICLES

- HTML5 Boilerplate: Working with jQuery and M...
- HTML5 Boilerplate Introduction
- New API Platform for HTML5
- BBC Adopts HTML 5, Mozilla Addresses Issues
- Advanced Sticky Footers in HTML and CSS
- HTML and CSS Sticky Footers
- Strategy Analytics Predicts HTML5 Phones to ...
- HTML5 Guidelines for Web Developers
- Learning HTML5 Game Programming
- More Engaging CSS3 and HTML Background Effec...
- Engaging HTML and CSS3 Background Effects
- More Web Columns with CSS3 and HTML
- Columns with CSS3 and HTML
- Creating Inline-Block HTML Elements with CSS
- Drag and Drop in HTML5: Parsing Local Files

Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Weekly Newsletter
 
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 
Support 



© 2003-2012 by Developer Shed. All rights reserved. DS Cluster 11 - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials