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-b...how/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/

__________________
http://constant-hosting.com Webhosting Improved. You'll love our shared hosting.

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.l ength)
+ ';' + nextImage;
}

Good luck!

__________________
Celebrity Addresses