JaSeeDC = JavaScript application for presentation of images and their slide shows

in Internet Explorer (version 5.5 or higher)

Code and HTML template are at http://pulpanj.me.cz/jaseedc/jaseedc.zip
Let me know if you find JaSeeDC usefull ( mailto:pulpanj@volny.cz )
JaSeeDC is freeware without any warranty and without any support
(c) Jaroslav Pulpan s.r.o. 2003

Why I wrote this application?

I am often preparing HTML pages with my photos. I had started years ago by tedious manual preparation of HTML pages completed by the primitive JavaScript that inserted thumbnail images into HTML (see www.webpark.cz/pulpanj/ for examples of my efforts). That JavaScript was capable to open full size image in the separate window and add flyover with name of the image file. HTML preparation requires a lot of time.
Later I switched to the simple HTML/thumbnail generator. In my case it was freeware program Batch Thumbs (by HarmWare http://harmware.com ). It is great because it generates both thumbnail images (that I need anyway) and HTML with contact sheet with all images found in some directory. Still I was not fully happy because I lost capability to describe individual images. Also opening of the full size images, as is done by generated HTML contact sheet, is not optimal. There is no preloading of images and displayed images did not use the screen optimally (there is still Internet Explorer menu bar).
This nuisance became more urgent when I recently ordered 500 MB of disk space on the public Internet server. Finally I am capable to publish lot of images with the resolution above 700 pixels (limit imposed by the menu bar height).

So I decided to write small application that will:

Display full size images using browser's full screen mode
Optionally starts to cycle images on the page (slide show)
Enable simple preparation of the underlying HTML

I chose to name such HTML framework – JaSeeDC. As name suggest JaSeeDC is trying to simulate slide show capabilities of standard image viewers like ACDSee. Could be that it still needs more optimization of the image preloading algorithms - but I tried my best.

Try example of the result at http://pulpanj.me.cz/jaseedc/example.htm

JavaScript apologies

I used JaSeeDC as JavaScript learning exercise. So code maybe ugly – who care in the age of code generators ;-)
JavaScript versions versus DOM levels versus Netsacpe/IE browsers versus operating systems are real the challenges of today’s global world where nothing is really compatible and bug free. To cope with it I decided to drop any compatibility ambitions and tested JaSeeDC only with IE6.0/WinXP. It also works on IE5.5/W2000.

Apology for any other combination…

How to prepare HTML contact sheet for JaSeeDC

Look to template of the HTML page ( file template.htm from http://pulpanj.me.cz/jaseedc/jaseedc.zip
Thumbnail images are defined as TD element of table(s). By adding custom attribute (expando in DOM terminology) named THUMB into the particular TD element we indicate that such TD element should became one thumbnail image. The URL of the underlying full size image could be optionally defined by custom FULL_IMAGE attribute.
The name of the thumbnail image and underlying full size image is defined by the following logic:

THUMB = name of the thumbnail image (the only compulsory additional attribute)
FULL_IMAGE = name of the full image if it is not defined by THUMB

If there is no FULL_IMAGE attribute then URL of thumbnail image is equal to the value of THUMB attribute and URL of the thumbnail image is equal to value of THUM extended by _th. (Rather complicated but this is way how Batch Thumbs generates thumbnail image names).
Both THUMB and FULL_IMAGE attributes expects that default file extension is .jpg (if it is missing it will be added ).
There are also other custom attributes to be placed into TD element. These defines thumbnail appearance:

FRAME_COLOR = color of the thumb nail image
LABEL_COLOR = color of the thumbnail image label
BGR_COLOR = color of the background in full screen mode
ILINK = URL link to another HTML page (no full screen image will be opened)

Names of all additional attributes of the TD element are case insensitive.

In order to make JaSeeDC application logic available in HTML page it is necessary to add:

Several event handlers into BODY element
Wrap your HTML code among <BODY> </BODY> tags into DIV element identified by id="thumbs"
Add run slideshow button (DIV with id="run_slideshow") anywhere into your HTML
Insert full screen handler (DIV with id="slideshow") just before </BODY> tag

After that you can compose your pictures into HTML table by marking TD elements with THUMB attribute. Again template.htm from http://pulpanj.me.cz/jaseedc/jaseedc.zip is the best starting point.

How to display images using JaSeeDC

After HTML contact sheet is loaded by browser you can open the full size image by clicking on its thumbnail image. You can scroll images forward (Space, Page Down keys) or backward (Page Down key). Enter key returns you to the contact sheet display. Escape key opens slide show controls and you can choose delay of automatic transition of images. Anytime key F1 displays help.

How to display panoramatic images using JaSeeDC

JaSeeDC supports simple viewer of the panoramatic images based on IFRAME with scrollbar. It is possible to add SPAN tag into TD element that correspond to panoramatical image. SPAN element should have onClick method set to fumction popwide(name-of-image,label-for-viever,viewer-bgcolor).