copyright 2003 Leipper Management Group. All rights reserved
ESPG is a simple javascript method to show collections of pictures in a convenient fashion. It uses only two web pages, a folder containing photograph thumbnails, and a folder containing the images to display. It shows the thumbnails in a frame along the left border of the screen with the current picture in the large display area to the right. Below these is a navigation frame with buttons to move to the next, previous, first, or last pictures. The displayed picture is linked to its source.
GALLERY.HTML is a holder web page that simply defines the frames and links the navigation frame to navigate.html and also has the web page meta data such as web page title, subject, and content search words.
NAVIGATE.HTML contains the javascript to write the thumbnails frame and the content frame as well as the html for the navigation buttons. It needs to be modified with a list of picture file names, an album title, and the caption with email address and home page. All of these are set as variables near the front of the script.
ESPG javascript is parameter driven using variables set near the top of NAVIGATE.HTML. These values should be modified as necessary for your album.
To make thumbnails, use a utility such as convert from http://imagemagick.org with the following command:
convert -size 120x120 picture.jpg -resize 120x120 +profile '*' thumbnails/ picture.jpg
A similar command can be used to create images in a medium resolution, say 800x600 to reduce user load times and web server storage space. It would be possible to set up an addition folder, say named 'originals' and change the link in the display picture so users would be able to view or obtain the original picture file while still being able to review thumbnails or moderate resolution copies.
To see ESPG in action or view the code, see
http://sierranevadaairstreams.org/destinations/reno-cc-tahoe/pelican/gallery.html and
http://sierranevadaairstreams.org/destinations/reno-cc-tahoe/pelican/navigate.html
Any suggestions for code improvement are welcome - please send to software@leipper.org
Picture sizing allows the display of an entire photograph depending upon scaling of the browser display. To do this ESPG displays pictures with only the width attribute set. The hidden assumption is that the images present in 'landscape' or screen mode where the width has more pixels than the height. Thumbnails are presented as a 120 pixel width. Photographs are presented a 400, 600, or 800 selectable widths using buttons in the navigation frame.
An optional caption may be added to each photograph. It is appended to the photograph file name using a forward slash ('/') character as a delimiter between the name and the caption. The forward slash is used because there is no path indication in the photograph file name (thumbnail/ and images/ are added for relative addressing as needed) and therefore no such character in the file name. Everything after the first forward slash in the photograph array string is considered a caption for the picture to be displayed below the picture in the main display area.
The automatic advance to the next picture on a timed interval is controlled by button selection. You can adjust the timings for the control buttons by changing the values in the 'setTimer(x);' calls in the button 'onclick' parameter.
A primitive frames reset capability is provided by placing links to the album home page and to the gallery document in each frame with the TARGET=_TOP parameter set.