Grow your CSS skills. Land your dream job.

Rotating images from a list

  • # October 29, 2008 at 9:54 pm

    I have a website i’m designing for wordpress (learning thanks to these tutorials! thanks). Anyway, i have a header with a div with an image in it. How can i get that image to rotate to a new image either every few seconds or each time the user refreshes the page?

    thanks.

    # October 30, 2008 at 12:41 am

    I’ve been wanting to do that as well. That’s a perfect example!

    But I’m such a noob with js. I can’t extract what is necessary to duplicate that. :(

    I copied those two images to my /images folder so as to keep the test as close as possible. I copied the one .js script (but renamed it ScrollAd.js) into my /js folder. I grabbed the css and html listed below and stuck them in the appropriate files. But I can’t get it to work. Isn’t that all that’s relevant to make the images cycle?

    I’d post a link but I’m working locally. My webspace is in transition atm. What I get is a box the correct size to display one image. The first image in is the box but it is shifted right and down 20-40 pixels. And that’s it.

    You’d think I would be able to figure out such a simple thing. Anyone willing to point out what I’m doing wrong?

    Code:
    #scrollad {
    border:1px solid #FFBD5D;
    height:125px;
    line-height:125px;
    margin-bottom:10px;
    overflow:hidden;
    width:710px;
    }

    #scrollad ul li {
    clear:both;
    height:125px;
    line-height:125px;
    margin:0;
    overflow:hidden;
    padding:0;
    }

    Code:

    # October 30, 2008 at 12:53 am

    Sounds like you need some kind of random image php script. I found one here that looks promising. It would only change it after someone refreshes the page though.

    http://www.totallyphp.co.uk/scripts/random_image.htm

    If you wanted to make it happen automatically over a period of seconds, you’d probably want to use some kind of jquery script:

    http://www.malsup.com/jquery/cycle/begin.html

    # October 30, 2008 at 1:19 am

    Thank you. That was much easier to follow and I got it working right off. It looks considerably more robust. I’m looking forward to playing with it further.

    EDIT: Fantastic script. It’s amazing all the options it has. I can’t seem to get the bouncein to work though. I installed the easing script but it just changes from one image to the next without any animation. Do you need to edit something in one of the .js files to get them to work together?

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".