Sometimes similar photos are not given individual space on the page. When they form a series they can be shown with arrows on left and right edges. Click one of these edges to slide the adjacent image into view. This has become a widely accepted convention on the Web.

The Style Sheets and Javascript are peculiar to and the dynamic effect is achieved with the following line where you want the picture to appear.


The above 'include' is a shorthand way of writing some fiddly HTML. It is therefore very simplified.

Full size pictures are 540 pixels wide and 405 pixels high. Photos that are wider will scroll left and right (unless you hold down your mouse pointer on it). Narrower photos have the space to left and right masked.

Pic1 and pic2 etc are replaced by the name part of the photo files. They may be in the local folder's 'photos' subdirectory and be .jpg files (but leave that off the name). There may be any number of pictures.

Path is the route to where the folder is in relation to the page. If this argument is omitted then the path defaults to "photos/" which is the usual place to store ... er ... photos. If the photo is in a sub-folder called "graphics" then the path should be "graphics/".

Replace caption with what you want to be shown in a label below all of the pictures. If this is omitted or an empty "" no label is shown.


How to handle scores of photos.

Photos with arrows at left and right edges can be slid across.

Preloading the images makes the effect better but don't add too many.