Simple Manual Slide Show?

[Markaholic]

Hello all - I'm looking to create, with CSS and HTML, a simple manually controlled slide show. It should be quite straightforward to program. I have a two buttons, "next" and "previous," and I just want them to cycle through a few pictures that will display above - and I want it to take place on a single HTML page. I'm not sure if the best way is to show/hide the pictures, or use z-index, or use variables (if picture n is displayed, display picture n+1)... or what.

I'm pretty much trying to do this: http://www.ericharshbarger.org/cgi-bin/j.cgi?slideshow/index.html

Thanks for any help you can give me!

 

[LouTheDesigner]

Any knowledge of javascript? I'm sure you can just get the code for this type of thing from anywhere.

 

[wetgravy]

Pretty much what you are after can not be done with just html and css. Too simple of a language. Javascript is your best bet and there are probably some existing scripts that will do you just fine.

 

[constanthosting]

I stumbled across this pretty neat site a few days ago and it has two or three neat little ajax javascript slideshows on it that shouldn't be too hard to implement, http://miniajax.com/

 

[mrandrei]

Here's a JavaScript to run the manual slideshow:

// Manual Slide-Show script. With image cross fade effect for those browsers
// that support it.
// Script copyright (C) 2004-08 www.cryer.co.uk.
// Script is free to use provided this copyright header is included.
var manualPictures = new Array();
function NextImageSlide(pictureName,imageFiles)
{
// Ensure picture list primed.
if (manualPictures[pictureName] == null) {
manualPictures[pictureName] = imageFiles;
} else {
imageFiles = manualPictures[pictureName];
}
var imageSeparator = imageFiles.indexOf(";");
var nextImage = imageFiles.substring(0,imageSeparator);
var picture = document.getElementById(pictureName);
if (picture.filters)
{
picture.style.filter="blendTrans(duration=2)";
picture.filters.blendTrans.Apply();
}
picture.src = nextImage;
if (picture.filters)
{
picture.filters.blendTrans.Play();
}
manualPictures[pictureName] =
imageFiles.substring(imageSeparator+1,imageFiles.length)
+ ';' + nextImage;
}

Good luck!