How to set up a gallery presentation

  1. Create a local directory structure on your computer. The current working directory for the gallery should contain all the html, javascript, css and png-files. The big images must reside later in the /images subdirectory and the thumbnails in the /thumbnails subdirectory, both relative to the working directory.

  2. Create your images in the desired size for big-image representation. Irfanview may represent a good opportunity to aid in this process. It supports batch processing (including resize and resample).

  3. Auto-rename the images with ascending order (e.g. with Irfanview), with a string part followed by a three digit number part. Store the images in the /images directory.

  4. Create the thumbnail images from the big-sized images and store them in the /thumbnails directory. The names remain unchanged.

  5. Modify one or more template html files to suit the specific needs for your application. Most important: Assing the string part as specified in step 3 to the javascript variable "filename" (almost on top of the document). Note: each unique template file may have unique names. Template 1 can be used for all cases (template 2 is experimental). Further assign all row() calls correctly and adjust the number of rows. Note: I had left html table stuff outside of the row() in order to retain as much as possible pure HTML-coding with editing using a WYSIWYG editor in mind. Template 3 is an example of a file fully representable in a WYSIWYG editor, which may also serve as an example to study.

    Here each picture needs a link definition with javascript:showpict(n);, where n is an ascending number starting at 1. In a small javascript section, a variable index is set to the number of pictures (here 5).

  6. Test the gallery and then upload it to the target URL. Besides the thumbnails files and the images, the .css files and the .js files must be transferred as well as the following html-files: buttons.htm, frames.htm, picture0.htm, picture1.htm, presel.htm and usage.htm. The latter files can be modified according to specific preferences.