Home arrow HTML arrow Completing a 3D HTML Table Image Gallery

Completing a 3D HTML Table Image Gallery

In the first two articles of this series, I showed you a number of steps involved in constructing a 3D HTML table and putting an image gallery in such a table. I discussed the capabilities we'd want our gallery to have, and the three modes in which it would function. In this conclusion to the series, I will show you how to get those modes working and pull everything together.

Author Info:
By: Chrysanthus Forcha
Rating: 5 stars5 stars5 stars5 stars5 stars / 5
February 17, 2009
  1. · Completing a 3D HTML Table Image Gallery
  2. · Freezing and Manual Modes
  3. · Modification to the maximizeFn(ID) and the restoreFn(ID) functions
  4. · Advantages of the Image Gallery in a 3D HTML Table

print this article

Completing a 3D HTML Table Image Gallery
(Page 1 of 4 )

The Function for the Three Modes

The Automatic Mode

The three modes are the automatic mode, the freezing mode and the manual mode.

The start body tag has the following attribute:

onload = "scrollInwardCont()"

scrollInwardCont() means Scroll Inward Continuously. This is the name I have chosen to use; you can give it your own name. So as the page is loaded, the scrollInwardCont() function is called. This function is responsible for changing the planes (sets of pictures) automatically.

The scrollInwardCont() Function

We saw the scrollInward() function and its global variable, present, in the first part of this series. Our scrollInwardCont() function uses it to display the next plane. Our scrollInwardCont() function works with its own global variable, called manualScrolling. This variable is initialized to false. It can also have the value true. When its value is false, it means the page is in the automatic mode. When its value is true, it means the page is in the manual or freezing mode. The scrollInwardCont() function and its global variable are:

var manualScrolling = false; //when true, allows you to scroll manually

function scrollInwardCont()


//set manual scroll variable to false if it was true - this is the default

manualScrolling = false;

//call the scrollInward() function every 15s

TIDI = setInterval("scrollInward()", 15000);


This function is called as soon as the page is loaded. The default mode is the automatic mode, and we can say that this is the default function. When the function is called, it first of all sets the manualScrolling variable to false. This indicates that you are in the automatic mode. Then you have the statement,

TIDI = setInterval("scrollInward()", 15000);

setInterval() is a DOM function. Its first argument in our case is a call to a function that will be executed after every interval whose particular duration is the second argument in milliseconds. The function called is “scrollInward(),” which we want to be executed every 15 seconds. We know that 1000ms makes 1s. That is why we have 15000 as the second argument. The units, ms, are not typed into the function.

This DOM function returns an ID, which we assign to the TIDI variable. It is actually a global variable that can be accessed from elsewhere in the program. In the freezing or manual mode, we use this ID to stop the setInterval() function from re-executing itself.

blog comments powered by Disqus

- 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 

Developer Shed Affiliates


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