Go to:  Site entry | Site contents | Site index | Internet | JavaScript | Text bottom

Thumbnail  List  Generation  (Picture  Album  Support)

THUMBLST JavaScript (stand-alone) is a function that generates HTML text of a table representing picture album thumbnail list to be used in the document.write of the envelope HTML page.  Picture album thumbnail list gives album overview, and provides a choice of an entry point into the album.  The envelope HTML page displays picture album thumbnail list along with overall site navigation bars.

Click this link to have a look at simple example of picture album.  Click [Help] button in thumbnail window (generated by THUMBLST JavaScript), and press [H] key in full-size picture display window to get navigation help.  Here is thumbnail list navigation help:

Thumbnail Help Pop-up

THUMBLST JavaScript is a stand-alone one, which means that it s kept in a separate THUMBLST.JS file that gets included into HTML <HEAD> (normally at its end) using the following operators (directory leveling may vary):


       <SCRIPT LANGUAGE=JavaScript SRC=../../THUMBLST.JS></SCRIPT>
     

Included function is used in the <BODY> of HTML to generate HTML text of a table representing picture album thumbnail list to be used in the document.write.

THUMBLST JavaScript imbeds into HTML table being generated initial references to PICTURE JavaScript (designed as a recursive HTML page) that shows a picture to be viewed, and provides means (thumbnails, buttons, and keys) for the proximity navigation through the picture album.



<!-- Thumbnail List Generation  08/11/200103/29/2006 -->
<!-- ------------------------------------- 03/29/2006 -->
<!-- www.davar.net/THUMBLST.JS                        -->
<!-- Copyright (C) 20012006 by Vladimir Veytsel      -->
<!--

// Generates HTML table of thumbnail list presentation for building picture
// albums.  Serves mostly as a shorthand to save typing as well as page loading
// time by eliminating massive HTML repetitions and enabling easy manipulation
// of picture album via its plain text control list (array of picture file names
// and picture descriptions).

// Table has 6 thumbnail images (120*90) per row for fitting into browser
// window at standard 800*600 screen resolution.

// The returned value is the HTML text of a table representing picture
// thumbnail list to be used in the "document.write".

// Vertical split bar "|" is used as parameter delimiter for referencing
// PICTURE.HTM that displays the full-size picture.  To avoid possible
// problems "|" is substituted for "!" in every picture description.

// Term "current directory" below is used in relation to *.HTM that uses
// THUMBLST.JS to build thumbnail list, not to location of THUMBLST.JS
// itself that should normally be at web site root.

   function THUMBLST(Up_Dir,Dn_Dir,Pict_Lst,Thum_Dir,Pict_Dir)
            {// Up_Dir    - Up directory (PICTURE.HTM dir relative to current dir)
             //             (empty - PICTURE.HTM is in the current directory;
             //             when specified should end with "/", E.g.: "../../")
             // Dn_Dir    - Down directory (relative to PICTURE.HTM location)
             //             that contains *.JS file, thumbnail directory and
             //             picture directory (empty - current directory; when
             //             spec should end with "/", E.g.: "MISCL/CARTOONS/")
             // Pict_Lst  - *.JS file with picture list   (in the Dn_Dir)
             // Thum_Dir  - Directory with thumbnail JPGs (in the Dn_Dir)
             // Pict_Dir  - Directory with   picture JPGs (in the Dn_Dir)

             defaultStatus=Picture[0]
                          +" - Select a thumbnail and click it to view the full-size picture"

             Pict_Total=Picture.length-1
             Title=Picture[0].replace(/ /g,"  ")+"    "+Pict_Total
                  +"  Picture"
             if (Pict_Total>1)
                Title=Title+"s"

             Table="<CENTER><FONT SIZE=5 COLOR=Red><B><U>"+Title+"</U></B></FONT><BR> "
             Table=Table
                  +"<TABLE BORDER=0 CELLPADDING=0 CELLSPACING=0 ALIGN=CENTER WIDTH=745><TR><TD VALIGN=Top>"
                  +"<FONT COLOR=Blue>Select a thumbnail with the mouse cursor and left-click it "
                  +"to view the full-size picture."
             if (navigator.appName=="Microsoft Internet Explorer")
                Table=Table
                     +"<BR>Then \"Maximize\" window (middle button at top-right window corner), if necessary."
             Table=Table
                  +"</FONT></TD><TD ALIGN=Right><FORM><INPUT TYPE=Button VALUE=Help onClick=\"alert('"
                  +"Select a thumbnail with the mouse cursor and left-click it to view the full-size picture.          "
                  +"\\n\\nOnce in the full-size picture window,  click the big picture  to return to picture list,  or"
                  +"\\nclick one of  the thumbnails  \(or buttons\)  for  circular  proximity  navigation.  As  you"
                  +"\\nmove  mouse cursor,  watch  the Status Bar at the bottom of the window  -  text in it"
                  +"\\ndepends on the cursor position, and either describes selected object, or prompts for"
                  +"\\npossible action.  Press [H] key in the full-size picture window to get navigation help."
                  +"\\n\\nTo avoid confusion  don\\'t use  Windows Task Bar  to switch between  thumbnail list"
                  +"\\nand full-size picture windows."
                  +"')\"></FORM></TD></TR></TABLE>"
             if (( navigator.appName=="Microsoft Internet Explorer")||
                 ((navigator.appName=="Netscape")&&
                  (Number(navigator.appVersion.substr(0,1))>4)))
                Table=Table+"<BR>"

             Table=Table+"<TABLE BORDER=1 BORDERCOLOR=Black CELLPADDING=0 CELLSPACING=2 ALIGN=CENTER BGCOLOR=Silver><TR>"
             for (i=1;i<Picture.length;i++)
                 {Pict_Name =Picture[i].substr(0,8)+" "
                  Pict_Name =Pict_Name.substr(0,Pict_Name.indexOf(" "))
                  Pict_Descr="#"+i+"("+Pict_Total+") - "+Picture[i].substr(9).replace(/\|/g,"!")
                  Table=Table+"<TD WIDTH=120 HEIGHT=90 ALIGN=Center VALIGN=Center>"
                  Table=Table+"<A HREF=\"javascript:void(window.open('"+Up_Dir+"PICTURE.HTM?"+i+"|"+Dn_Dir+"|"+Pict_Lst+"|"+Thum_Dir+"|"+Pict_Dir+"|"+Picture[i].substr(9).replace(/ /g,"%20")+"','','resizable,titlebar,menubar,status'))\" "
                  Table=Table+"onMouseOver=\"window.status='"+Pict_Descr+"'; return true\" onMouseOut=\"window.status=''; return true\">"
                  Table=Table+"<IMG SRC='"+Thum_Dir+"/"+Pict_Name+".JPG' ALT=\""+Pict_Descr.replace(/\\\'/g,"'")+"\" BORDER=0></A>"
                  Table=Table+"</TD>"
                  if ((i%6==0)&&  // Close complete row of 6 thumbnails
                      (i!=Picture.length))
                     Table=Table+"</TR>"
                 }
             if ((Pict_Total>6)&&    // Generate empty thumbnail fillers
                 (Pict_Total%6!=0))  // for table row that wasn't closed
                {for (i=0;i<6-Pict_Total%6;i++)
                     Table=Table+"<TD WIDTH=120 HEIGHT=90> </TD>"
                 Table=Table+"</TR>"
                }
             Table=Table+"</TABLE>"
             if (Comment!="")
                Table=Table+"<BR><P>"+Comment+"</P>"
             else
                Table=Table+"<BR>"
             Table=Table+"</CENTER>"
             return Table
            }
//-->
  

Usage of THUMBLST JavaScript is described separately in the Picture Album Support System presentation page.  You'll find there several representative examples of picture albums along with detailed instructions how to use this system for your own picture albums.


View [and save] THUMBLST.TXT text
(Use [Back] button or [Alt]+[CL] to return here from text view)
To make text executable rename it to *.JS
and make a global change of "&lt;" into "<" signs.
Copyright © 20012006 by
Go to:  Site entry | Site contents | Site index | Internet | JavaScript | Text top