Images

To ensure pages will open quickly even though there are many photographs, images are presented as miniature previews - called thumbnails. Click on a thumbnail to show a larger sized photo.

Small thumbnails are 125 pixels wide by 94 pixels high. They are expanded slightly on the page to 180px x 135px. This allows three to be arranged horizontally across the content area. The full size image is our standard size of 540px x 405px.

Writing HTML for scores of thumbnails would be tedious and error prone so, once again, we resort to client side JavaScript to do all the repetitive work. Putting a set of thumbnails on the page simply requires the following code...

<script>
thumbn_triple(N)
</script>

The above example will create a gallery with N rows of three horizontally aligned thumbnails. On a page with filename photos_abc.htm the thumbnail source files are allocated as b_abc01.jpg to b_abc(Nx3).jpg.

When the page has loaded the thumbnails need to be initialised with thumbn_init().

Clicking a thumbnail shows a full size photo. Photos are located in the folder defined by the msnindex[0] string variable and the full picture source filename is held in an msnpics[t-1] array where the index number in the array is the thumbnail number minus 1.

That is the simple system. It is extended further ...

Add date and time

Sometimes full size photos on this site are named according to the time and date they were taken. For example -

d101214160bc.jpg was taken d = 2015: 10 = October: 12 = date: 14 = 2pm: 16 = minutes past: 0 = first photo: bc = photographer: .jpg = file type.

If the script knows where in this filename to start it can attach the date and time to a thumbnail as a tooltip and as a caption on the full size photo. The position is passed as an argument in the initialising function thus - thumbn_init(4).

Captions for all shapes and sizes

Thumbnails can used when the full photos are non standard dimensions and different aspect ratios. And each photo can have an individual caption. It may also show full size photos that are not in the usual photos folder.

For these features to be handled by the thumbn_triple() function each thumbnail (in sets of three) need to be passed arguments.

<script>
thumbn_triple("caption1|thumbstub01|405x540|20",
"caption2|thumbstub02|500x500|",
"caption3|thumbstub03||")
</script>

For the argument in line 1 the thumbnail b_thumbstub01.jpg has tooltip title of "caption1". Although this thumbnail appears to be 180px x 135px on screen it is actually 180px x 240px with the top 20 pixels (and lower 85 pixels) masked. When it is clicked it shows a portrait aspect picture 405px wide by 540px tall and that has "caption1" as (you guessed) its caption.

The argument on line 2 shows a thumbnail 180px x 180px with the lower 45 pixels masked and clicking it displays a square 400px x 400px photo with caption2.

The third line argument puts caption3 on a standard 540px x 405px photo.

Notes

• The full sized photos are progressively loaded after the page appears by calling delaythumb(). This speeds up initial page display and reduces delays when a thumbnail is clicked.
• The full sized photo expands from the thumbnail and will cover part of the screen. If there are at least three rows of three thumbnails in a set the full picture will be kept over the gallery area.
• The thumbnail file naming convention means that they can also be used on the album index pages and elsewhere. For this reason it is best to place any thumbnails with a non 4x3 aspect ratio at the end of the gallery and exclude them from the thumbnail count in the menu_db[] array.

Type 2 Thumbnails

The second type of thumbnails were developed at the end of 2017. They allow much more variation of aspect ratios then the original system described above that relies on photos being mainly 540px wide by 405px high (4:3 landscape). The new system opens full size photographs straight away so relies upon a fairly fast internet connection.

The thumbnails are arranged in rows and downscaled to fit several pictures of the same height calculated to neatly fill the row width. (The last row may be only partly filled).

The JavaScript include for this type is ...

<script>
writePicRowsHTML(picarray[,pathstring])
</script>

... where picarray is a list of the photograph files name stubs, and pathstring is where in the site structure the photo files are kept. The latter may be omitted if the photos are in the photos subdirectory of where the page is.

Type 2 thumbnails also require thumbn_init( ) after page load and will display time and date if an appropriate number is passed, preferably 4 to work with the naming convention described earlier. The two systems can co-exist on the same page, as demonstrated here.

While Type 2 is under development its underlying JavaScript is in its own picture_rows.js file in the Gallery folder.

Getting the Bigger Picture

If you want one or more of the photographs from the thumbnails, click on one you want to enlarge it, scroll to the bottom of the page and click the Get Big Picture button. The fileneme of the photo will be saved into the Contact Centre notes. When you have identified all the photographs that you want, complete your name and email address and click SEND. We'll send you the best and biggest version of the photos by email, probably one at a time so we don't clog up your email server.

Next: Getting a closer look.