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.

For slow connections the new photos may not load quick enough to give an instant response so all the images are preloaded invisibly onto the page.

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.


  • Pages with these scripted images need prime_traits(); as an onload function call to set up the start positions.
  • Don't add too many photos on a page because they must all be loaded before the priming function is called.
  • Photos must always be an even number of pixels wide. If the picture scales to a height of 405px then the width must scale to an even number.
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.