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).
© Jaroslav Pulpan s.r.o. 2003 just for fun ® All rights reserved