Electronic photo album in HTML HELP

• Download demo (compiled) photo album - 947 kb (26 photos)
• Download album source - 1001 Kb (with the 26 photos)
• Download album source LIGHT - 226 Kb (with ONLY two photos, for the download challenged people)
• Download the Microsoft HTML Help Workshop from the Microsoft HTML Help downloads page

  

  

Contents

• Introduction
• Features
• What is HTML Help?
• Installing HTML Help workshop
• Creating your own photo album
• The album source files
• encode.bat and srcenc.exevv

Introduction

Finally some fun with HTML Help! This little project demonstrates that you can do more with HTML Help than online help... The screenshots above shows the demo album, implemented using Microsoft's HTML Help. In just one CHM file, you can distribute a complete photo album with your photos.

When I bought my first digital camera in 1999, I needed a decent way to distribute my photos in an album like manner. With this electronic photo album you yourself can easily construct your own album using your own photos and give the album to your family and friends. Anyone running Windows and Internet Explorer 4 (or later) can easily view it. The album in the source code download contains all the logic, just add water, eh, photos.

The demo album is composed of photos that I shot during TechEd 2001 (Barcelona), my 2001 vacation trip in South Africa and some pictures from an "I-am-not-in-my-right-state-of-mind" website of mine (webknuffels.nl).

Features

• fixed size window with an image of an photo frame, designed for at least an 800 by 600 screen,
• a little 'control panel' on each page: go to front page, go to index page, do slide show and go to legend page.
• a front page or title page (with for example a composition of some of the photos),
• an automatic index page of the photos in the album,
• show a particular photo with a click on the index page,
• slide show all photos,
• a legend/about page,
• previous/next photo arrows,
• very easy to construct your own album: prepare your photos (JPGs), register every JPG in photos.js, make up a title for each photo, compile and presto! (Well, almost).

This article is mostly about how you can use the album with your own photos and not how the album is technically constructed. If you're interested, take a look at the internals of the album in the HTML pages and in the .js files. I can be persuaded to do an article about the technical part... Some of the technical features:

• Passing parameters to another page inside the CHM using bookmark ("#") notation in the URL, instead of not-working search ("?") notation! Now information can be passed from one page to another, like the last viewed photo so any page change can react appropriately to it.
• Prepared for encoding the scripts (see "encode.bat and srcenc.exevv" later) to prevent tampering to the album.
• Buffered image loading to overcome an IE4 image resizing DHTML 'bug'.

What is HTML Help?

Microsoft HTML Help is the successor to WinHelp and is used for Windows Help systems since Internet Explorer 4 and Windows 2000. The HTML Help files typically use the .CHM extension and consists of several HTML files, JPG/GIF images and scripts. A CHM file is actually like a complete website compressed into one file: 'CHM' is short for 'Compiled HTML' . Additionally, with a table of contents, index and full text search, a complete help system is created.

Using the HTML Help compiler (see later) from the Microsoft's HTML Help workshop, the album's files are compiled into a single .CHM file. This album in particular uses 4 HTML files, several GIFs and the photo JPGs to make up the album.chm. We're not going to use the HTML Help contents, index and full text search tab with the HTML Help photo album.

Installing HTML Help workshop

To compile the files into the .CHM file, you'll need to install Microsoft's HTML Help Workshop, which contains the compiler. Download the workshop using the link above and install it.

Creating your own photo album

In just 6 steps you construct your own album using the album source code (which you can download through the link at the top of this article):

1. Extract the album source from the source zip file into a folder of your choosing and delete all the (demo) JPG files in the "photos400x300" folder. I've summed up the files further below.
   
   
2. Select the photos you want in the album, resize them to at most 300 pixels high and at most 450 pixels wide using a image editor like PhotoShop or PaintShop Pro and save the files into the "photos400x300" folder.
   
   
3. Next we need to create the photo for the start page of the album; it's called composition.jpg and must be saved in the "photos400x300" folder. I usually create a composition from some of the photos (hence the name) and add some text like the album's title. I find the composition for the demo album fairly successful.
   
   
4. Edit photos.js to 'register' your photos: 
   • Replace the registration of the demo photos with your own at

     // Define the photos.
     aPhotos = new Array(
     	//"Filename", "Caption",
      	"yourphoto1.jpg", "Title of photo 1",
      	"yourphoto2.jpg", "Title of photo 2",
     	"yourphoto3.jpg", "Title of photo 3"  // NO COMMA at the last entry!
             }

   • For every photo, store a filename-title pair: "yourphoto1.jpg", "Title of photo 1", making up a JavaScript array of these pairs. Note that you have to use a comma's between and after the pair, but leave out the trailing comma after the last pair or a syntax error is yours! 
     
     
5. Edit album.hhp (HTML Help compiler project file) to change the compilation output and album title:
   • Change "Compiled file" (the name of the resulting .CHM file), from

       Compiled file=victorsdemoalbum.chm

     to something like

       Compiled file=vacation2001.chm

   • Change the album's title by changing "Victor's demo photo album" in

     [WINDOWS]
     main="Victor's demo photo album",,,,,,,,,,,0x0,[16,0,717,560],0x0,0x0,,0,0,0,0

     to something like

     [WINDOWS]
     main="Vacation 2001",,,,,,,,,,,0x0,[16,0,717,560],0x0,0x0,,0,0,0,0

6. Start the Microsoft HTML Help Workshop and open album's HTML Help project file album.hhp. Choose File | Compile and let the Workshop compile the album. Presto! That's it! The album is created!
   
   

The album source files

These are the files in the album:

photos400x300\	folder that holds the photos and composition.jpg
images\	album images
start.htm	Start page of the album
thumbpic.htm	Index/thumbnail page of the album
pic.htm	normal pic/slideshow page
about.htm	About/Legend page
album.css	album's style sheet
album.js	Album's JavaScript code
lang.js	Tooltip texts
langen.js	Tooltip texts English (copy over lang.js)
langnl.js	Tooltip texts Dutch (copy over lang.js)
photos.js	Registration of the photos
Album.hhp	HTML Help project file
encode.bat	Encoding the album's scripts
SCRENC.EXEVV	Microsoft script encoder

encode.bat and srcenc.exevv

encode.bat is just an easy calling mechanism for encoding the scripts (HTML and .JS files) in the album using the Microsoft Script Encoder SRCENC.EXE. Now only Internet Explorer (actually: the Microsoft Scripting Engines) can decode and understand the scripting. It's a convenient method to protect the album from tampering: the scripts are no longer human readable!

The idea is to encode the scripts just before you compile the files into the .CHM (step 6 above).

Now why did I add the two 'V's to the script encoder's filename? Because encoding is pretty irreversible and you better do the encoding process on a copy of the album folder! When you've copied the album, remove the double 'V's from the encoder's filename and execute encode.bat to encode the album's files. Then perform step 6 of "Creating your own album".

Example from an encoded photos.js:

//**Start Encode**#@~^OwcAAA==@#@&@#@&Jz,Ktb/,Wk^+~mKxOCbx/,CV^PY4n~w4WDWdPCU9P^
laOkKxd~K0@#@&&JPOtbd,wCMYbmE^lM~l^4;:c@#@&@#@&zz,j+DPY4n~w4WDW~Nr.mOWMz@#@&/P4
!:4UCbVjk.nhtGDWkSW1lDrW	PxJatGOK/FZT6F*zrI@#@&kHNrEhjbynn4GYK/JG1lYrG	
P~P,xrw4KYK/cZ!Xf!ZzEi@#@&&&krDTrxmV?b"nn4WDWdSG^mYrW	~P,'E24WYGd8!+cX{+%&ri@#@&
@#@&zJ~?Y~Y4+~ObYV~W6PY4n~l^4!:@#@&d)^4;::rY^+~x,J.r^DW.Bk~9+hKPmV4!:rI@#@&@#@&
zJP9n6kx~Y4+Pa4GYK/c@#@&lK4KYG/,xP	+A~zDDCzv@#@&zJEwksxm:+r~,EZmwOkKxES@#@&JZT
...

License

This package is published under the Artistic license.

Change log

26 jan 2002 - Initial publication
20 feb 2002 - added light src download (with only two photos) and added usage license.
07 nov 2002 - Removed the dead HtmlHelp workshop exe link and clarified some things.