// VERSION 2
// Client Side Javascript to:
// Select multiple images at random and display on a web page.
// -- any number of images can be displayed per invocation.
// given a set of N images for potential display.
// given X images to actualy display
// this code will randomly select X images from the set N.
// The image will have both its ALT and its TITLE attributes set to text specified by in the data set.
// Optionaly, a Caption will be displayed with each image immediately under the image -- this text will be identical to the ALT and TITLE text
// This code also includes a function to trigger the display of the selected images
// REQUIREMENTS / INSTRUCTIONS:
// Page to host the images must have some containing element for each of the images displayed (DIV, TD, etc) and
// each of these containing elements must have an ID attribute named "img_x" where x is an incrementing number starting with 0
// ie) img_0, img_1, img_2, etc.
//
// 1)
// Edit the script below to include the N images as part of the theImages[] array. If no Caption text is desired, at a minimum include the separating comma
// Edit the variable NumPics to reflect the number of random images to be displayed.
// Set the variable displayCaption to either 'true' or 'false' to optionaly show captions.
//
// 2)
// To use this script, load it with a script statement in the HEAD element, then ivoke the function displayPics() as/where appropriate.
// EXAMPLE:
/*
...
...
...
*/
// SIDE: it should be a trivial exercise to place the data array in a separate include file
// HISTORY:
// v1 g.mcleod, 2007.04.05 - initial release
// v2 g.mcleod. 2009.02.07
// - added ability to optionaly display captions
// - currently only inserts a
between image and caption text
// - used this to properly implement the ALT and TITLE tags
// - required a redefinition of the data array
//////////////////////////////////////////////////
// do not edit anything below this line
//////////////////////////////////////////////////
var preBuffer = new Array();
//preload randomly selected images
for (i = 0; i < NumPics; i++) {
preBuffer[i] = new Array();
preBuffer[i][0] = new Image();
var whichImage = Math.floor(Math.random()*(theImages.length));
preBuffer[i][0].src = theImages[whichImage][0];
preBuffer[i][1] = theImages[whichImage][1];
theImages.splice(whichImage,1);
}
//iter through preload array
//Page requires sufficient elements to hold new IMG tags (div, td, span, etc).
//Each of these must have id attributes = "img_x" where x = I[0..X] for X images to display on the page. NOTE the zero based numbering.
function displayPics() {
for (i = 0; i < preBuffer.length; i++) {
var theLocationID = "img_" + i;
var theLocationEl = document.getElementById(theLocationID);
theLocationEl.innerHTML = '![' + preBuffer[i][1] + '](' + preBuffer[i][0].src + ' "' + preBuffer[i][1] + '")
';
if (displayCaption == true) {
theLocationEl.innerHTML += "
"+ preBuffer[i][1] + "
";
}
}
}