SlideShow needs control Buttons

[jcarmody]

Hello -

I have a very simple javascript to run a slide show and would like to add control buttons to allow for manual paging through each picture. I know there are a lot of scripts out there canned and ready to go, but I really like this one because I don't need to code a specific path for each image. Can anyone help?

SCRIPT CODE:

var ssSpeed = 5000;
var ssCrossFadeDuration = 2;
var ssImageCount = 0;

var ssTimer;
var ssImageCurrent = 1;
var ssImages = new Array();

var ssFirstRun = true;

function preloadSlideShow() {
for (i = 1; i <= ssImageCount; i++) {
ssImages = new Image();
ssImages.src = ssImagePath + i + ".jpg"; //ssPictures;
}
}

function runSlideShow() {
if (ssFirstRun) preloadSlideShow();

if (document.all){
document.images.SlideShow.style.filter="blendTrans(duration=ssCrossFadeDuration)";
document.images.SlideShow.filters.blendTrans.Apply();
}

document.images.SlideShow.src = ssImages[ssImageCurrent].src;
if (document.all) document.images.SlideShow.filters.blendTrans.Play();
ssImageCurrent = ssImageCurrent + 1;
if (ssImageCurrent > ssImageCount) ssImageCurrent = 1;
ssTimer = setTimeout('runSlideShow()', ssSpeed);
}

HTML CODE:


<div class="ItemDetail1">
<h1>Celebrating &amp; slideshow </h1>

<p>Description of slide show goes here.</p>
<p><img id="SlideShow" name="SlideShow" src="/image/spacer.gif" class="SlideShow" style="width:539px;" /></p>
<br style="clear:both;" />
</div>



<script type="text/javascript" src="/include/javascript/slideshowJC.js"></script>
<script type="text/javascript">
<!--//
var ssImageCount = 4;

var ssImagePath = '/image/slideshow'
runSlideShow();
//-->
</script>

 

[BillyRayPreachersSon]

Paging through is easy enough... it's simply a case of setting 'ssImageCurrent' and then running this one line from your 'runSlideShow' function:

document.images.SlideShow.src = ssImages[ssImageCurrent].src;

However, there are other issues, such as cancelling the timer (I assume you don't want the slideshow to continue while you are paging through). To do this, investigate the 'clearTimeout' command which you can use to help you.

Hope this helps,
Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

Dan's Page [blue]@[/blue] Code Couch:

http://www.codecouch.com/dan/

Code Couch Tech Snippets & Info:

http://www.codecouch.com/