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 / 2
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

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

- Does HTML5 Need a Main Element?
- Revisiting the HTML5 vs. Native Debate
- HTML5: Not for Phone Apps?
- HTML5 or Native?
- Job Hunting? Freelancer.com Lists This Quart...
- HTML5 in the News
- Report: HTML5 Mobile Performance Lags
- The Top HTML5 Audio Players
- Top HTML5 Video Tutorials
- HTML5: Reasons to Learn and Use It
- More of the Top Tutorials for HTML5 Forms
- MobileAppWizard Releases HTML5 App Builder
- HTML5 Boilerplate: Working with jQuery and M...
- HTML5 Boilerplate Introduction
- New API Platform for HTML5

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
 
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 
Support 

Developer Shed Affiliates

 




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