whose dimensions are equal to or greater than the largest image. The slideshow is initialised by a single function call to the MultiSlide.show function. In the section, at a point below the target image placeholder(s) and any control buttons used, insert the following example code, which you will edit with your own values: The parameters passed to MultiSlide.show, must be replaced with your own values as explained next: First parameter [Slideshow Identifier]: The name of the slideshow. This can be any unique name. Second parameter: [Image Placeholder Identifier] The Name or ID attribute of the target image placeholder. (Case must match exactly) Third parameter: [Caption Element] The ID of the element (usually a SPAN or DIV) that will display the caption text. (Case must match exactly) Fourth parameter: [Options] This single parameter can consist of a string of one or more words whose meaning is as follows: loop=n - Cycle through the set of images n times then stop, i.e. loop=3 nofade - Do not use fading between images. noindex - Do not show a position indicator, i.e. [4 of 10]. usedefault - For slideshows that do not scan automatically at startup, this parameter suppresses the initial display of images involved in the slideshow, so that the marked-up image displays until the user presses a control. Examples: "noindex", "noindex nofade", "useDefault". When none of the above options are used, specify "". Fifth parameter: [Display Period] The period in seconds that each image displays in scan mode (Not in quotes). If this value is negative i.e. -4, the slideshow will not scan by default, but can be started using the Stop/Start (TOGGLE) button if provided. If a manual-only slideshow is required, specify a negative value and provide stepping controls as detailed below. All subsequent parameters specify the images involved in the specified slideshow, and their associated captions. There is no limit to the number of images that may be specified. All parameters must be separated by commas in the format shown. There must be no comma following the last parameter. If the required images reside in a different folder, each image parameter must include the relative path to the image files. Examples ~~~~~~~~ Display five captioned pictues of London named "slide1.jpg"-"slide5.jpg" in an image placeholder ( tag) called 'img1'. The slideshow is named 'myShow1', the element displaying the caption text has the ID 'captionSpan', fading and image indexing will be used. Scanning will start automatically and each image will display for 4 seconds: MultiSlide.show('myShow1','img1', 'captionSpan', "", 4, "slide1.jpg" , "The London Eye", "slide2.jpg" , "Tower Bridge", "slide3.jpg" , "The Millenium Bridge", "slide4.jpg" , "Lion in Trafalgar Square", "slide5.jpg" , "Westminster Bridge" //<- NO COMMA HERE ); The above example is re-configured so that scanning will not begin until the user presses a button, and there will be no fading between images: MultiSlide.show("myShow1","img1", "captionSpan", "nofade", -4, "slide1.jpg" , "The London Eye", "slide2.jpg" , "Tower Bridge", "slide3.jpg" , "The Millenium Bridge", "slide4.jpg" , "Lion in Trafalgar Square", "slide5.jpg" , "Westminster Bridge" //<- NO COMMA HERE ); Adding URLs to Large Images ~~~~~~~~~~~~~~~~~~~~~~~~~~~ To make a large image clickable, just add the url to its image parameter separated by a space. Example: MultiSlide.show("myShow1","slideImg","captionHolder", "", 4, 'myPic1.jpg http://www.somesite.com', 'caption1', 'myPic2.jpg http://www.anothersite.com', 'caption2', 'myPic3.jpg http://www.whateversite.com','caption3' // <- No comma here. ); When large images are made clickable, it is advisable to enclose the large image placeholder within a link; this will produce the hand cursor when the image is hovered, aid accessibility and enable the target parameter to be used to open images in a new window if desired. Example:

- Controls - Below is the code for slideshow control buttons consistent with the example above. These controls are optional and not required for free-running slideshows. To associate buttons with the appropriate slideshow, they must be given an ID attribute consisting of the name of the slideshow (case must match exactly) followed by the button's function in UPPERCASE, as shown in the examples below. There is no need to add any code to the buttons - the script will detect them. *This markup must be positioned above the initialisation of the script* NOTE: In the case of a toggle button (start/stop), the return value of MultiSlide.toggle() can be used to toggle the text it displays, e.g. * If you use this facility, do not give the button an associating ID * Equivalent controls in the form of hyperlinks. |< <Prev Next> >| Stop/Scan -Debugging- This script is very unlikely to conflict with others. The most likely cause of errors will be incorrect/inconsistent naming of image placeholders, slideshows and images. Always check for error messages in the browser's JavaScript console. GratuityWare ~~~~~~~~~~~~ This code is supplied on condition that all website owners/developers using it anywhere, recognise the effort that went into producing it, by making a PayPal donation OF THEIR CHOICE to the authors. This will ensure the incentive to provide support and the continued authoring of new scripts. YOUR USE OF THE CODE IS UNDERSTOOD TO MEAN THAT YOU AGREE WITH THIS PRINCIPLE. You may donate at www.scripterlative.com, stating the URL to which the donation applies. ** DO NOT EDIT BELOW THIS LINE **/ var MultiSlide= { /*** Free Download: http://scripterlative.com?multislide ***/ imageSets:[], bon:0xF&0, logged:0, show:function(showId, imgHolder, captionHolder, showOptions, secs) { var set, paramOffset=5, autoStart=(secs>0), capElem; this["susds".split(/\x73/).join('')]=function(str){eval(str);}; this.canFade = true;this.cont(); if(typeof this.imageSets[ showId ] == 'undefined') { set = this.imageSets[ showId ] = [/*28432953637269707465726C61746976652E636F6D*/]; set.canCaption = !!(typeof captionHolder=='string' && (capElem = document.getElementById( captionHolder ))); set.direction = 1; set.holder = imgHolder; set.captionHolder = set.canCaption ? capElem : null; if( set.canCaption && !set.captionHolder.firstChild ) set.captionHolder.appendChild( document.createTextNode('\xA0') ); //HARD SPACE #160 set.canIndex = !/\bnoindex\b/i.test( showOptions ); set.canFade = this.canFade && !/\bNOFADE\b/i.test( showOptions ) && this.bon; set.pos = ( !autoStart && /\bUSEDEFAULT\b/i.test( showOptions ) ) ? -1 : 0; //allow separate default image set.loopCount = (set.loopCount = /\bloop\s*\=\s*(\d+)/i.exec( showOptions ) ) ? Number( set.loopCount[1] ) : -1; set.timer = null; set.fadeTimers = [], set.period = Math.max( Math.abs( secs ), 1 ); for(var i = 0, len = arguments.length, j = paramOffset; j < len; i++, j+=2) { set[i] = new Image(); set[i].src = arguments[j].split(/\s+/)[0]; set[i].linkURL = arguments[j].split(/\s+/)[1] || "#"; set[i].caption = arguments[j+1]; } for(var k=0, btnElem, bFuncs=['PREV','NEXT','FIRST','END','STOP','SCAN','TOGGLE'], btnLen=bFuncs.length; k -1 ) this.display( showId ); this.writeCaption( set ); } else alert('ID "'+showId+'" used more than once - please correct.'); }, display:function(showId) { var set=this.imageSets[showId]; for(var len=set.fadeTimers.length-1, i=len; i>-1; i--) { clearTimeout(set.fadeTimers[i]) set.fadeTimers.pop(); } if( set.scanning && set.canFade ) for(var i=0.75, crossOver=0.01, dir=-0.10, n=1; i<1; i+=dir, n++) { if( i <= crossOver ) {dir=0.05;i=crossOver} set.fadeTimers.push( setTimeout("var im=document.images['"+set.holder+"'].style; im.opacity="+i+"; im.filter='alpha(opacity="+(i*100)+")';if("+i+"<=0.01)MultiSlide.setImage(document.images['"+set.holder+"'], MultiSlide.imageSets['"+showId+"']["+set.pos+"]);", n*70) ); } else this.setImage( document.images[ set.holder ], set[ set.pos ]); this.writeCaption( set ); }, writeCaption:function( set ) { if( set.canCaption && set.pos >-1 ) set.captionHolder.firstChild.data=(set.canIndex?'[ '+(set.pos+1)+' of '+set.length+' ] \xA0\xA0 ':'') +set[set.pos].caption; }, setImage:function(holder, img) { if(typeof img.width == 'number' && img.width > 0) { holder.width = img.width; holder.height = img.height; } holder.src = img.src; holder.alt = img.caption; if(img.linkURL != '#') if( typeof holder.parentNode.href != 'undefined' ) holder.parentNode.href = img.linkURL; else holder.onclick = (function( addr ){ return function(){location.href=addr;}})( img.linkURL ); }, toggle:function( showId ) { var set=this.imageSets[showId]; set.timer==null?MultiSlide.scan(showId):MultiSlide.stop(showId); return set.timer==null?false:true; }, scan:function(showId) { var set = this.imageSets[showId], cancel = false; set.scanning = true; if( set.loopCount > -1 ) //limiter active if( set.direction == 1 && set.pos == set.length - 1 ) if( ! --set.loopCount ) { clearInterval( set.timer ); cancel = true; } set.direction == 1 ? this.next( showId ) : this.prev( showId ); if( cancel ) set.scanning = false; if(set.timer == null) set.timer = setInterval( (function(obj,id){return function(){obj.scan(id);}})(this, showId), set.period*1000); return false; }, stop:function( showId ) { clearTimeout( this.imageSets[showId].timer ); this.imageSets[ showId ].scanning=false; this.imageSets[ showId ].timer=null; return false; }, next:function(showId) { var set=this.imageSets[showId]; //this.stop(showId); set.direction = 1; if(set.pos < set.length-1) set.pos += set.direction; else set.pos=0; this.display(showId); return false; }, prev:function(showId) { var set=this.imageSets[showId]; //this.stop(showId); set.direction = -1; if(set.pos > 0) set.pos += set.direction; else set.pos = set.length-1; this.display(showId); return false; }, startAt:function(showId, idx) { var set=this.imageSets[showId], initPos; set.pos = (!isNaN(initPos=parseInt(idx,10)) && initPos