This photo presentation system is fully client based and can be set up with ease. It uses 2 browser windows. A thumbnails page with small images organized in rows and columns and a framed page which consists of a big image area and a button area. This second page holds all information about status, and provides a browser based history of all images which can be browsed forth and back.
While a big image is viewed, the next one in order of the thumbnails page is loaded in the background. The appropriate "next" button has another colour and the background of the image area also.
When the user is returning to the thumbnails page (click on the big image), he or she can select another image for big representation. This time (only here), a pop-up window informs about a preselect opportunity. When the user confirms this, the thumbnails pages provides in preselecting images. Preselected images become a thick border. The framed page is entered when an already bordered image is clicked again. At this time, small bandwidth equipped users (or pages with > 500 kB/image) will profit: The selected pages are shown in order and the preload feature works accordingly.
Thumbnails can be spread over several pages provided they are linked. Technical detail: activating a link on a page destroys current javascript variables and objects. The framed big-image page records this and restores the references of the new thumbnails page content to the framed page. This conserves all of the information of the system (e.g. the history of all viewed content). The user can thus browse through all magnified images offline when he/she has loaded more than one thumbnails page.
No need to create a html-file for each big image nor to specify size information for each image. Javascript and URL-arguments take care of integrating the appropriate image in the framed page. Two copies of the image html file exists. They are loaded in alternate fashion. This ensures correct operation of the history cache with the popular browsers.
Gallery creators only need a set of thumbnail pages using a template, numbered thumbnail images and correspondingly numbered big images. All other resources are independent of the contents.
Image borders around thumbnail images represent "visited" status.
This web page is tested with IE5&6, Mozilla 1.6 and Opera 7.
The files that make up the gallery system can be downloaded as a zip
package from the Sourceforge Project page. A manual
is included as well as hints for
potential contributors in further programming.
When preload is aborted by hitting the "next" button, IE5 seems not to use the part of the image already cached.
When a thumbnail image is clicked before the thumbnail page is loaded completely, the page will not complete unless the browser's reload button is hit.
One-liners associated with big images, preferably stored in the thumbnails html file as array.
Mechanism ensuring that the first 10 thumbnail images are guaranteed to load before the others are loaded. Note: this is tested in Template 2, but it does not work with elder browsers, since they need a real picture addressed in the HTML-part.
Note: Programming in Javascript is weird. Not because of Javascript itself, but because of its lack in consistence accross different browsers. A few peculiarities and some useful links are provided here.
Project Site: Sourceforge.net/projects/smartgallery