Batch Slide Show

JavaScript Code for

By Vic Phillips http://www.VicsJavaScripts.org.uk

A Slide Show to display batches of images
The Slide Show display can consist of any number of images.
The layout of the Slide Show is not mandatory.
Slide Show images that cannot be located will not be displayed.

A Supplement bssPart3 allows messages to be displayed under the Batch Slide Show Image

The demonstration utalises my Image PopUp Script (optional)
and my Simple Slide Show Script (optional)

Produced following a forum question and previously addressed by
Mike Foster CrossBrowser.com

The bssPart1 Code
Click the Text Area to Toggle Height.

// Application Notes
// A Slide Show to display batches of images
// The Slide Show display can consist of any number of images.
// A status bar message 'Loading Images' will display as images are loaded.
// Slide Show images that cannot be located will not be displayed

// The Slide Show is initailised by a <body> onload event
// eg
// <body onload="bssBatchSlideShow();" >

// The slide show display is not mandatory but
// the images must have a title attribute of 'bssImage'
// e.g
// <img title="bssImage" src="Blank.gif" width="10" height="10">
// <img title="bssImage" src="Blank.gif" width="10" height="10">
// <img title="bssImage" src="Blank.gif" width="10" height="10">
// <img title="bssImage" src="Blank.gif" width="10" height="10">
// <br>
// <img title="bssImage" src="Blank.gif" width="10" height="10">
// <img title="bssImage" src="Blank.gif" width="10" height="10">
// <img title="bssImage" src="Blank.gif" width="10" height="10">
// <img title="bssImage" src="Blank.gif" width="10" height="10">
// <br>
//
// The Slide Show actuation calls are
// eg
// <span onclick="javascript:bssSlideShow('Forward');" >Forward</span>
// <span onclick="javascript:bssSlideShow('Back');" >Back</span>
//
// Images in the SlideShow can be resized to specified dimensions,
// with orginal image proportions will be retained,
// by customising bssReSizeWidth or bssReSizeWidth.
// If bssReSizeWidth value is set bssReSizeWidth will have priority over bssReSizeHeight
//
// The slide show can be controlled from a select box
// with an id of 'bssSelectBox' and the onchange call onchange="javascript:bssSelect(this.options[this.selectedIndex].value);"
// eg
//<select id="bssSelectBox" size="1" onchange="javascript:bssSelect(this.options[this.selectedIndex].value);" >
//
// The select box option text may be defined in array bssTitleAry with a field specifying the title for each group
// If the field is not specified, 'Group '+groupnumber will be displayed as the title.

// bssPart1 Functions allow the Script can be inigrated with other JavaScripts
//
// bssClickFunction(bssimgobj), bssOverFunction(bssimgobj), bssOutFunction(bssimgobj)
// allow external functions to be call on
// 'onclick', 'onmouseover' and 'onmouseout' image events
// The image object is passed to these functions

// bssPart1 Function
// bssGroupLoaded(bssary)
// An array with the current image objects is passed
// to the function when a group of images has loaded

// Customise these function content to the application requirements
// Note: event call may also be hard coded in the Image HTML Code

// Application Notes for Message Panels
// Requires bssPart 3

// The message panel appearance is defined in customising variables
// The images which require a message and the message are dfined in 'bssMessAry'
// Each field of 'bssMessAry' contains an array
// the second level array defines
// field 0 - the Batch Slide Show image file name  (string)
// field 1 - the Height of the message             (string)
// field 2 - the message                           (string)

// The Message Panel will be the width and positioned
// at the left edge and imediatly below the relavent image.
// The page layout must allowance for the message height

// All variable, function etc. names a prefixed with 'bss'
// to minimise conflicts with other JavaScripts

// Cusomising Variables

var bssImgagePath='http://www.wcsidecars.co.uk/Popham2003/Thumbs/'; // The image path of images
// If the images are in different paths set as '' and declare paths in bssImageAry

var bssImageAry=ptcPhoto; // The array with the images to display
var bssImgDelay=100;      // The delay in displaying loaded images.

var bssTitleAry=ptcTitles; // The array with the titles to display or new Array(); for auto titles

// Image ReSize (Optional)
var bssReSizeWidth=115;      // null or the required image width
var bssReSizeHeight=null;   // null or the required image height

// Customising Variables  for Message Panels
var bssMessBGColor="#FFFFCC";
var bssMessTxtColor="black";
var bssMessBorder="solid black 1px";
var bssMessTxtSize=12;
var bssMessPadding=5;

var bssMessAry=new Array();
bssMessAry[0]=['dscf0001.jpg',20,'Message for Pic 1'];
bssMessAry[1]=['dscf0003.jpg',20,'Message for Pic 3'];
bssMessAry[2]=['dscf0010.jpg',30,'Message for Pic 10 Hood Up'];
bssMessAry[3]=['dscf0011.jpg',30,'Message for Pic 11 Hood Down'];
bssMessAry[4]=['dscf0013.jpg',20,'The Last Message'];

// Functions called on Slide Show Image events
// OnClick, OnMouseOver, OnMouseOut.
// The Slide Show image object is passed to the function.
// Customise the function content to the application requirements

function bssClickFunction(){
}

function bssOverFunction(){
}

function bssOutFunction(bssomgobj){
}

// This function is called when a group of images has loaded
// An array with the current image objects is passed to the function
// Customise the function content to the application requirements

function  bssGroupLoaded(bssary){
}

//-->
</script>

The Script
All variable, function etc names are prefixed with 'bss'
to minimise conflicts with other JavaScripts

The Script is in Three Parts.
bssPart1 - The Customising Variables and Application Notes.
bssPart2 - The Functional Code (about 4.5k).
bssPart3 - The Message Panel Functional Code. (about 2k).

bssPart2 and bssPart3 are best as External JavaScripts.

The Script is initialised by the onload event in the <body> tag:
<BODY onload="bssBatchSlideShow();" >

The Script has been tested with IE6, and MozillaFireFox