HTML
  Home arrow HTML arrow Page 2 - Building an Image Gallery in a 3D HTML Tab...
Dev Articles Forums 
ADO.NET  
Apache  
ASP  
ASP.NET  
C#  
C++  
ColdFusion  
COM/COM+  
Delphi-Kylix  
Design Usability  
Development Cycles  
DHTML  
Embedded Tools  
Flash  
Graphic Design  
HTML  
IIS  
Interviews  
Java  
JavaScript  
MySQL  
Oracle  
Photoshop  
PHP  
Reviews  
Ruby-on-Rails  
SQL  
SQL Server  
Style Sheets  
VB.Net  
Visual Basic  
Web Authoring  
Web Services  
Web Standards  
XML  
Mobile Linux 
App Generation ROI 
IBM® developerWorks 
Weekly Newsletter
 
Developer Updates  
Free Website Content 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us Get Paid 
Request Media Kit
Contact Us 
Site Map 
Privacy Policy 
Support 
 USERNAME
 
 PASSWORD
 
 
  >>> SIGN UP!  
  Lost Password? 
HTML

Building an Image Gallery in a 3D HTML Table
By: Chrysanthus Forcha
  • Search For More Articles!
  • Disclaimer
  • Author Terms
  • Rating: 5 stars5 stars5 stars5 stars5 stars / 3
    2009-02-02

    Table of Contents:
  • Building an Image Gallery in a 3D HTML Table
  • 3D HTML Table: a Closer Look
  • The Table Code
  • Viewing the Next Plane

  • Rate this Article: Poor Best 
      ADD THIS ARTICLE TO:
      Del.ici.ous Digg
      Blink Simpy
      Google Spurl
      Y! MyWeb Furl
    Email Me Similar Content When Posted
    Add Developer Shed Article Feed To Your Site
    Email Article To Friend
    Print Version Of Article
    PDF Version Of Article
     
     
    ADVERTISEMENT


    Building an Image Gallery in a 3D HTML Table - 3D HTML Table: a Closer Look


    (Page 2 of 4 )

    Planes

    You can consider the cells to be in a 3D grid with horizontal and vertical planes. The vertical planes should be seen as 2D tables, one behind the other, going into the page. The counting of the planes begins from zero. The first plane is plane 0, the second is plane 1, the third is plane 2, and so on.

    Indices

    The counting of all indices begins from zero. I use the variable i to denote the index for a row in the normal 2D table; the variable j to denote the index for a column in the normal 2D table; and the variable k to denote the index for a vertical plane in the 3D table. This gives an index order of (i, j, k).

    Seeing 3D Contents on a 2D Screen

    We have a 3D table. How do you see the content of each cell on a 2D screen? The table has been arranged into vertical planes. You see the cell contents plane by plane, but not all the planes at once. All of the cells of the plane that are to be seen have the value of “block” for their CSS Display property. The rest of the cells in the other planes have the value of “none” for their CSS Display property. When an HTML element has a display property of “block,” it can be seen on screen. When an HTML element has a display property of “none,” it is not seen on screen and does not occupy space.

    A Table Example

    I will use a 3 X 3 X 3 table for the illustration. That is, there will be three rows and three columns in each plane, and there will be three planes. The cells of the first plane have the Display property value of “block” initially. This can be changed to “none,” while the value for another plane is changed to “block,” by JavaScript. The content of each cell is an image tag. All of the images can be different.

    Operation from the User’s Point of View

    There is an HTML button at the bottom of the 3D table. When you click the button, you see the contents of the next plane. When the last plane is reached, and you click the button, you will see the first plane. Clicking the button will repeat the process. The pictures in the planes are small in size. When you click a picture it enlarges itself. When you click the picture again, it goes back to its small size at its cell position in the plane.

    In the next part of the series I will show you how you can scan the plane automatically while keeping the ability to maximize and restore the images.

    More HTML Articles
    More By Chrysanthus Forcha


       · I tried to implement the image gallery and in explorer it works pretty well but in...
       · Hi,Please, give me some time to look for the solution.Author
     

    HTML ARTICLES

    - Hello HTML 5, Goodbye Gears
    - Comparing Browser Response to Active Client ...
    - Testing Browser Response to Active Client Pa...
    - Active Client Pages: Completing the Code for...
    - ACP and Browsers: Setting up an Example
    - How Browsers Respond to Active Client Pages
    - Completing a Tree with Active Client Pages
    - HTML Form Verification and ACP
    - Building an ACP Tree
    - Completing an ACP 3D HTML Table Image Gallery
    - Building an ACP 3D HTML Table Image Gallery
    - A Multiple Page Image Gallery with Active Cl...
    - Building an Image Gallery with Active Client...
    - Concluding a Menu for All Browsers
    - A Vertical Menu for All Browsers







    © 2003-2010 by Developer Shed. All rights reserved. DS Cluster 2 Hosted by Hostway
    For more Enterprise Application Development news, visit eWeek