SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Addict
    Join Date
    Jul 2006
    0 Post(s)
    0 Thread(s)

    Question Image fading, random start?

    I'm using this tutorial to create a simple list of images that fade between each other.

    I can get it working fine following the instructions.

    However, i wonder if any genius's on here can tweak it so when the page loads it randomly picked image from the group and then carries on with its fades?

    Basically the image will be on a home page so each time you visit i want it to be a random image from the group and then fade through the rest..


    Thanks for any help

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Christchurch, New Zealand
    104 Post(s)
    4 Thread(s)
    Here is where the default starting imge is set up.

    Code javascript:
    if ( $active.length == 0 ) $active = $('#slideshow IMG:last');

    Because you want it to start at a random image, we will require a few things:

    • the number of images, which is $('#slideshow IMG').length
    • a random function, which is Math.random()
    • a way to convert the random number to an integer, which is Math.floor()
    • a way to select the random image, which is the eq() selector

    The following should do the job.

    Code javascript:
    if ( $active.length == 0 ) {
        var randomIndex = Math.floor(
            Math.random() * $('#slideshow IMG').length
        $active = $('#slideshow IMG:eq(' + randomIndex + ')');
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript


Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts