Simple Manual Slide Show?

Discussion in 'Web Design' started by Markaholic, May 31, 2009.

to remove all ads.
  1. Markaholic

    Markaholic New Member

    Messages:
    2
    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!
     
  2. LouTheDesigner

    LouTheDesigner New Member

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

    wetgravy New Member

    Messages:
    176
    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.
     
  4. constanthosting

    constanthosting New Member

    Messages:
    138
    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/
     
  5. mrandrei

    mrandrei New Member

    Messages:
    334
    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! :)
     

Share This Page