Picture Album Support System enables you to create your own picture albums with a minimal effort — apart of preparing full size pictures and thumbnails (you have to do this regardless of the presentation system you are going to use) all it takes to create a picture album is to compose a simple plain text list of your picture files with optional descriptions of individual pictures, and to make a simple HTML page for picture album entry.
Click this link to have a look at simple example of picture album. Click [Help] button in thumbnail window, and press [H] key in full-size picture display window to get navigation help.
Album picture files (their *.JPG file names and optional descriptions) are supplied in JavaScript array (SIMPLE.JS file). For photo albums the blue block of this text can de derived from DESCRIPT.ION file that can be created by digital photo image file renaming program described on this web site.
Picture = new Array(0)
Picture[ 0]="Simple Picture Album"
Picture[ 1]="20000819 Sat 08/19/2000 11:22 Ridgewood, NJ"
Picture[ 2]="20010503 Thu 05/03/2001 08:14 Ridgewood, NJ"
Picture[ 3]="20010506 Sun 05/06/2001 11:00 Ridgewood, NJ"
Picture[ 4]="20010509 Wed 05/09/2001 17:54 Ridgewood, NJ"
Picture[ 5]="20010525 Fri 05/25/2001 15:17 Ridgewood, NJ"
Picture[ 6]="20010621 Thu 06/21/2001 13:51 Ridgewood, NJ"
Comment="Optional comment"
Below there is the text of HTML page for album entry. As you can see it's fairly simple — it serves for the album entry only (code in blue lines inserts into HTML text thumbnail generator JavaScript and list of picture files, code in red lines generate thumbnails table that provides entry into picture album.
<HTML>
<HEAD>
<TITLE>Simple Picture Album</TITLE>
<SCRIPT LANGUAGE=JavaScript SRC="../../THUMBLST.JS"></SCRIPT>
</HEAD>
<BODY>
<SCRIPT LANGUAGE=JavaScript SRC="SIMPLE.JS"></SCRIPT>
<SCRIPT LANGUAGE=JavaScript>
document.write(THUMBLST("../../","MISCL/DOWNLOAD/","SIMPLE","THMBSAMP","PHOTSAMP"))
</SCRIPT>
</BODY>
</HTML>
Although on most part it makes sense to have separate HTML pages for picture albums, technically it is possible to incorporate picture album into any page as this is shown in an example below.
The basis of Picture Album Support System is a couple of universal picture album handling JavaScripts that comprise the core of the system. Single copy of each JavaScript can work with all picture albums in the same location. It makes sense to keep these scripts either at the root of directory structure, or in a separate directory (I prefer to keep them at the root of my web site).
There are two descriptive objects that provide information about specific picture album. One is a JavaScript array of picture file names and descriptions; another is an envelope HTML page that displays picture album thumbnails and serves for album entry.
Apart of what has been listed above picture album support system includes images of navigation buttons (designed for me by my daughter Natalia), and "paper" backgrounds that I've picked up from the web.
In order to keep system complexity within reasonable limits it was necessary to decide what would be the basic screen resolution for images. Supporting multiple resolutions would add another dimension of complexity to the scripts (that were already complicated enough), and, what is most important, would require to keep several copies of the same image, which was hardly practical (on-the-fly image resizing by the browser is not an option — it yields poor results).
Picture album support system was developed originally for digital photo albums, and thus 4x3 image proportion was adopted as a standard (other proportions could be also accommodated to fit 4x3 frame with some additional effort for image formatting). 4x3 is also a proportion of computer monitor screen, which makes it a clear choice for a standard.
The 800x600 screen resolution was adopted as a standard that provides decent image quality without causing major picture loading delays. No doubt, what constitutes a "decent image quality" is a matter of a personal taste, and any given choice could be rightfully criticized, yet that choice had to be made. System statistics showing that majority of my site visitors were using 800x600 screen resolution also contributed to this choice.
This resulted in the 640x480 size for the picture itself, considering the necessary space for a window bars. The 640x480 image fits without scrolling the 800x600 Netscape screen (with toolbars removed out of the view).
The quality of image is still acceptable, IMHO. See it for yourself — the picture below has size 640x480, as all other photos accessible through the picture albums listed in the table below.
I've chosen the thumbnail size of 120x90 — can't remember now exactly why (first version of this system was developed in 2001 — several years before writing of this text). Most likely this simple 4x3 proportion somehow seemed to me to be of the right size for a thumbnail — maximum that fits into the full size picture window design — it's vertical navigation bar on the right side.
A system for picture album support can be best introduced through a set of representative samples that show both special and general system behavior. Since in the picture display window you can see up to 5 images — one full size picture and up to four navigational thumbnails, albums with total number of pictures less than six are special cases, while albums with total number of pictures more than five represent a general case.
Picture album support system samples are presented in the table below. Use this table to view various picture album samples that can be easily related to their HTML source texts and JavaScript picture lists. The last line of the table shows the original version of the system developed in 2001 — I keep it here for my own comparative reference.
| Picture album | HTML source | JS picture list | Size | Thumbnail list | Proximity navigation |
| SAMPL-01.HTM | SAMPL-01.TXT | SAMPL-01.LST | 1 picture | 1 short row | None |
| SAMPL-02.HTM | SAMPL-02.TXT | SAMPL-02.LST | 2 pictures | 1 short row | Minimal (swap pics) |
| SAMPL-03.HTM | SAMPL-03.TXT | SAMPL-03.LST | 3 pictures | 1 short row | Reduced (< 5 pics) |
| SAMPL-04.HTM | SAMPL-04.TXT | SAMPL-04.LST | 4 pictures | 1 short row | Reduced (< 5 pics) |
| SAMPL-05.HTM | SAMPL-05.TXT | SAMPL-05.LST | 5 pictures | 1 short row | Special (= 5 pictures) |
| SAMPL-06.HTM | SAMPL-06.TXT | SAMPL-06.LST | 6 pictures | 1 complete row | General (> 5 pictures) |
| SAMPL-07.HTM | SAMPL-07.TXT | SAMPL-07.LST | 7 pictures | 2 incomp. rows | General (> 5 pictures) |
| SAMPL-11.HTM | SAMPL-11.TXT | SAMPL-11.LST | 11 pictures | 2 incomp. rows | General (> 5 pictures) |
| SAMPL-BB.HTM | SAMPL-BB.TXT | SAMPL-BB.LST | 11 pictures | 2 incomp. rows | General (> 5 pictures) |
| SAMP-OLD.HTM | SAMP-OLD.TXT | SAMP-OLD.LST | 11 pictures | 2 incomp. rows | General (> 5 pictures) |
All of the above listed picture albums have been verified to function as expected with the following four browsers (Netscape 4.8 was used for development and debugging):
| Browser | Version | Comment |
| Netscape | 4.8 | Last version of the "classical" Netscape |
| Netscape | 7.2 | Functionally equivalent to Mozilla |
| Mozilla | 1.7 | Functionally equivalent to new Netscape |
| IE | 6.0 | Picture window has to be enlarged once |
Let's look at a step-by-step example of building shown above SAMPL-11.HTM photo album. Below there is description of several preliminaries that have to be prepared only once before building actual picture albums.
Download PICALBUM.ZIP file to your computer (hold down [Shift] key and click left mouse button on file name, then proceed with file saving). (If I were doing it on my computer, the PICALBUM.ZIP file would be saved in C:\DAVAR directory that is the root directory for picture albums.) UnZip downloaded file (using WinZip or any similar program); after unzipping PICALBUM.ZIP file can be deleted. After that C:\DAVAR directory will contain picture album support system consisting of the following 50 files:
Prepare scripts for mass file resizing (this can be done for photos having standard 4x3 proportions; pictures with different proportions require manual resizing). I use Adobe PhotoShop (these days it comes with every scanner you buy), and below there is an extract from my plain text notes on preparing PhotoShop image processing scripts. (Along with resizing the enhancement script creation and usage is described — though it's not related directly to picture album creation, it fits well into this procedure and provides additional convenience.)
Create Batch Script ------------------------------------------------------------
One-time operation on any photo file without saving
Open Actions window, if it's not opened
[Window] - <Show Actions>
Select "Actions" tab in the Actions window
Create Enhancement Script ------------------------------------------------------
Record photo enhancement actions:
Open any photo file
[Create new action] - Button left of Trashcan
Name: Enhance
Set: Photo
[Record] - Red dot button
[Image] - <Adjust> - <Auto Levels>
[Image] - <Adjust> - <Auto Contrast>
[Stop] - Black square button
Close photo file without saving
Create Resizing Scripts --------------------------------------------------------
Basic size 640x480 (digital camera proportions are the same as screen)
Horizon Verticl
------- -------
Picture size: 640x480 360x480
Thumbnail size: 120x 90 68x 90
Actions are based on setting image HEIGHT size (width will be calculated)
- Record photo resizing actions:
Open any photo file
[Create new action] - Button left of Trashcan
Name: Photo480 - Full-size 640x480 picture
Set: Photo
[Record] - Red dot button
[Image] - <Image Size>
Height: 480 - (Width will be calculated)
[OK]
[Stop] - Black square button
Close photo file without saving
- Record thumbnail resizing actions:
Open any photo file
[Create new action] - Button left of Trashcan
Name: Photo90 - Thumbnail 120x90 picture
Set: Photo
[Record] - Red dot button
[Image] - <Image Size>
Height: 90 - (Width will be calculated)
[OK]
[Stop] - Black square button
Close photo file without saving
Let's presume that 11 photos have been downloaded from digital camera to C:\PHOTO directory. First step is to rename image files using recorded data and time stamp to generate file names. (Please refer to RENPHOT description for details.) Open DOS/Command session, make C:\PHOTO directory current, and run command:
C:\PBASIC\RENPHOT /Ridgewood, NJ
Along with image files' renaming RENPHOT will create file DESCRIPT.ION in current C:\PHOTO directory. This file can be used as a main building block of the picture album.
20000819.JPG Sat 08/19/2000 11:22 Ridgewood, NJ
20010503.JPG Thu 05/03/2001 08:14 Ridgewood, NJ
20010506.JPG Sun 05/06/2001 11:00 Ridgewood, NJ
20010509.JPG Wed 05/09/2001 17:54 Ridgewood, NJ
20010525.JPG Fri 05/25/2001 15:17 Ridgewood, NJ
20010621.JPG Thu 06/21/2001 13:51 Ridgewood, NJ
20010701.JPG Sun 07/01/2001 09:22 Ridgewood, NJ
20010708.JPG Sat 07/08/2001 11:50 Ridgewood, NJ
20030326.JPG Wed 03/26/2003 22:06 Ridgewood, NJ
20030504.JPG Sun 05/04/2003 14:39 Ridgewood, NJ
20040327.JPG Sat 03/27/2004 11:55 Ridgewood, NJ
Next we run three Adobe PhotoShop scripts: enhancement script (enhanced photos replace originals), and two resizing scripts — one for full-size photos (640x480), and another for thumbnails (120x90). Target directories for resizing should be created before running resizing scripts.
Run Enhancement Script ---------------------------------------------------------
[File] - <Automate> - <Batch>
Set: Photo
Action: Enhance
Source: Choose C:\PHOTO
Destination: Choose C:\PHOTO
File naming: DOCUMENT NAME + EXTENTION
[OK]
Run Resizing Scripts -----------------------------------------------------------
[File] - <Automate> - <Batch> - Resize photos
Set: Photo
Action: Photo480
Source: Choose C:\PHOTO
Destination: Choose C:\DAVAR\MISCL\DOWNLOAD\PHOTSAMP
File naming: DOCUMENT NAME + EXTENTION
[OK]
[File] - <Automate> - <Batch> - Resize thumbnails
Set: Photo
Action: Photo90
Source: Choose C:\PHOTO
Destination: Choose C:\DAVAR\MISCL\DOWNLOAD\THMBSAMP
File naming: DOCUMENT NAME + EXTENTION
[OK]
Next step for the example being discussed is to create a JavaScript array of photo file names and comments — C:\DAVAR\MISCL\DOWNLOAD\SAMPL-11.JS file. This can be easily done with the help of any text editor supporting operations on text blocks (my preference is QuickEdit in text mode, and TextPad for GUI). All it takes is to get a *.JS file pattern and to plug into it the DESCRIPT.ION file, deleting from it ".JPG" text block, add picture album title, optional comment, and adjust indexes, if necessary.
<!-- Picture Album Support System Sample (11 Pictures) 08/23/2004-10/26/2004 -->
<!-- ------------------------------------------------------------- 08/27/2004 -->
<!-- www.davar.net/MISCL/DOWNLOAD/SAMPL-11.JS -->
<!--
// Maintain descriptions of the originals and perform ALL picture file
// manipulations using ACDSee, so that its DESCRIPT.ION file will be
// the best source for quick creation and easy update of picture list.
// Precede apostrophe "'" within comment text by TRIPLE back-slash "\\\".
Picture = new Array(0) // Picture array (dynamically sized)
Picture[ 0]="Picture Album Support System Sample" // Picture list title
// FileName Picture comment for the Status bar
// -------- ----------------------------------
Picture[ 1]="20000819 Sat 08/19/2000 11:22 Ridgewood, NJ"
Picture[ 2]="20010503 Thu 05/03/2001 08:14 Ridgewood, NJ"
Picture[ 3]="20010506 Sun 05/06/2001 11:00 Ridgewood, NJ"
Picture[ 4]="20010509 Wed 05/09/2001 17:54 Ridgewood, NJ"
Picture[ 5]="20010525 Fri 05/25/2001 15:17 Ridgewood, NJ"
Picture[ 6]="20010621 Thu 06/21/2001 13:51 Ridgewood, NJ"
Picture[ 7]="20010701 Sun 07/01/2001 09:22 Ridgewood, NJ"
Picture[ 8]="20010708 Sat 07/08/2001 11:50 Ridgewood, NJ"
Picture[ 9]="20030326 Wed 03/26/2003 22:06 Ridgewood, NJ"
Picture[ 10]="20030504 Sun 05/04/2003 14:39 Ridgewood, NJ"
Picture[ 11]="20040327 Sat 03/27/2004 11:55 Ridgewood, NJ"
Comment="Any comment text (italics here is inherited from HTML page),"
+"<BR>or none at all, if \"<FONT COLOR=Red>Comment</FONT>\" variable is set to empty."
+"<BR><FONT COLOR=Blue>Use HTML here to format comment text as required.</FONT>"
+"<BR><BR>This sample picture album presents the <B>general case</B>"
+"<BR>when number of pictures is <U>above</U> the border value of <B>5</B>"
+"<BR><FONT COLOR=Green>(max number of pictures in the full-size picture window)</FONT>."
//-->
Please note that Comment parameter is required. If you don't need any global comment for your thumbnail list, specify it empty — Comment="".
And finally, picture album entry HTML page has to be created — C:\DAVAR\MISCL\DOWNLOAD\SAMPL-11.HTM file. As it was mentioned earlier this is an envelope page for the thumbnail list builder JavaScript which in addition to that sets the overall site navigation links.
<!-- Picture Album Support System Sample (11 Pictures) 08/24/2004-12/20/2004 -->
<!-- ------------------------------------------------------------- 11/12/2004 -->
<!-- www.davar.net/MISCL/DOWNLOAD/SAMPL-11.HTM -->
<HTML>
<HEAD>
<TITLE>Picture Album Support System Sample (11 Pictures)</TITLE>
<META HTTP-EQUIV="Content-Type" CONTENT="Text/HTML; CharSet=ISO-8859-1">
<META NAME = Description
CONTENT ="Page: Picture Album Support System Sample.
Site: Davar Web Site,
Computer Science, Programming, Mainframe, UNIX, PC, Internet,
Mathematics, Go, Zen, Quotations, Extracts, Humor, Russian.">
<META NAME = Keywords
CONTENT ="Davar Web Site,
Picture Album, Photo Album,
Picture Gallery, Photo Gallery">
<META NAME = Author CONTENT="Vladimir Veytsel">
<SCRIPT LANGUAGE= JavaScript SRC="../../THUMBLST.JS"></SCRIPT>
</HEAD>
<NOSCRIPT>
<BODY BACKGROUND="../../PAPER001.JPG" BGCOLOR=White TEXT=Black LINK=Blue ALINK=Fuchsia VLINK=Purple>
</NOSCRIPT>
<SCRIPT LANGUAGE=JavaScript>
<!--
if (sessionStorage.getItem("BG")=="On")
{N=Math.floor(Math.random()*9)%9+1
document.write("<BODY BACKGROUND='../../PAPER00",N,".JPG' BGCOLOR=White TEXT=Black LINK=Blue ALINK=Fuchsia VLINK=Purple>")
//-->
</SCRIPT>
<!-- Delete or comment out next line to suppress browser warning -->
<SCRIPT LANGUAGE=JavaScript SRC="../../BRWWARN.JS"></SCRIPT>
<SCRIPT LANGUAGE=JavaScript SRC="SAMPL-11.JS"></SCRIPT>
<!-- Page: Picture Album Support System Sample.
Site: Davar Web Site,
Computer Science, Programming, Mainframe, UNIX, PC, Internet,
Mathematics, Go, Zen, Quotations, Extracts, Humor, Russian. -->
<FONT FACE="Times New Roman" SIZE=3>
<A NAME="Top"></A>
<I><CENTER>
<FONT COLOR=Green> Go to:</FONT> <A HREF="../../index.htm">Davar site entry</A>
<FONT COLOR=Green>|</FONT> <A HREF="../../CNT.HTM">Davar contents</A>
<FONT COLOR=Green>|</FONT> <A HREF="../../IND.HTM">Davar index</A>
<FONT COLOR=Green>|</FONT> <A HREF="../../LINKS.HTM">Davar links</A>
<FONT COLOR=Green>|</FONT> <A HREF="#Bottom">List bottom</A>
<HR>
<FONT COLOR=Green> Other picture albums:</FONT>
<A HREF="../CARTOONS/CARTOONS.HTM">Cartoons</A>
<FONT COLOR=Green>|</FONT> <A HREF="../../ZEN/PAINTING.HTM">Zen paintings</A>
<FONT COLOR=Green>|</FONT> <A HREF="../../AK/PAINTING.HTM">AK paintings</A>
<HR><BR>
<NOSCRIPT>
<TABLE ALIGN=CENTER CELLPADDING=10 BORDER=2>
<TR>
<TD ALIGN=Center>
Sorry,<BR>
Essential functionality of this page<BR>
depends on availability of JavaScript.<BR>
Your JavaScript is either disabled,<BR>
or not supported by your browser.</TD>
</TR>
<TR>
<TD ALIGN=Center>
Please <A HREF="../../ABOUT.HTM#JavaScript"><FONT COLOR=Red><BLINK><B>enable</B></BLINK></FONT></A> JavaScript<BR>
and [<FONT COLOR=Red>Reload</FONT>] this page,<BR>
or use [<FONT COLOR=Red>Back</FONT>] to <FONT COLOR=Red>exit</FONT>.</TD>
</TR>
</TABLE>
<BR>
</NOSCRIPT>
<SCRIPT LANGUAGE=JavaScript>
<!--
document.write(THUMBLST("../../","MISCL/DOWNLOAD/","SAMPL-11","THMBSAMP","PHOTSAMP"))
//-->
</SCRIPT>
<HR>
<FONT COLOR=Green> Other picture albums:</FONT>
<A HREF="../CARTOONS/CARTOONS.HTM">Cartoons</A>
<FONT COLOR=Green>|</FONT> <A HREF="../../ZEN/PAINTING.HTM">Zen paintings</A>
<FONT COLOR=Green>|</FONT> <A HREF="../../AK/PAINTING.HTM">AK paintings</A>
<HR>
<FONT COLOR=Green> Go to:</FONT> <A HREF="../../index.htm">Davar site entry</A>
<FONT COLOR=Green>|</FONT> <A HREF="../../CNT.HTM">Davar contents</A>
<FONT COLOR=Green>|</FONT> <A HREF="../../IND.HTM">Davar index</A>
<FONT COLOR=Green>|</FONT> <A HREF="../../LINKS.HTM">Davar links</A>
<FONT COLOR=Green>|</FONT> <A HREF="#Top">List top</A>
</CENTER></I>
<A NAME="Bottom"> </A>
</FONT>
</BODY>
</HTML>
When looking at the album entry HTLM page shown above it is important to keep in mind the following:
Only colored lines are related to the picture album being presented; all other lines are either navigation or comments.
Below there's a directory scheme of file locations of the "SAMPL-11" picture album representative example.
C:\DAVAR
:
+-- THUMBLST.JS JavaScript that builds picture album thumbnail list
:
+-- PICTURE.HTM JavaScript that displays a picture to be viewed
:
+-- BRWWARN.JS JavaScript that displays the browser warning
:
+-- BUT-????.GIF 20 files of navigation buttons
:
+-- PAPER???.JPG 27 files of backgrounds
:
+-- MISCL
:
+-- DOWNLOAD
:
+-- SAMPL-11.JS album's image file list
:
+-- SAMPL-11.HTM album's entry page
:
+-- THMBSAMP
: :
: +-- Album's *.JPG thumbnail image files
:
+-- PHOTSAMP
:
+-- Album's *.JPG full-size image files
Click this link to see the photo album that was build following the above description. Click [Help] button in thumbnail window, and press [H] key in full-size picture display window to get navigation help.
The only difference in creation of generalized picture album as compared with photo album is the necessity to do the manual resizing of each picture — described above scripts for photo resizing are not applicable to pictures — while all photos have the same 4x3 proportion as computer monitor screen, pictures generally don't. It is necessary to resize each picture twice:
For each resizing you have to try either width or height of the proportion, and make sure that the other dimension of resized picture is not greater that the other dimension of proportion. In other words you simply have to fit your resized image within a proportion window so that one of picture dimensions is equal to one of the proportion dimensions, while another picture dimension doesn't exceed another proportion dimension. Though the process is inevitably manual, it's pretty simple and quick.
There are multiple picture albums on this web site that were created using this system. You can look at them at the following links:
Hopefully it won't bee too difficult for you now to use this system for your own photo and picture web albums creation.