Page 1 of 2 12 LastLast
Results 1 to 10 of 13

Thread: Fade-in Slideshow: random display of images how-to

  1. #1
    Join Date
    Apr 2005
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question Fade-in Slideshow: random display of images how-to

    Script: Fade-in Slideshow
    http://www.dynamicdrive.com/dynamici...nslideshow.htm

    I am using the excellent fade in slideshow but would like the script to display my images in a random order, that is, once an image is displayed it should then randomly pick one of the other images to display next. Can this be achieved easily by modifying the script? How? Thanks for your help in advance! cheers

  2. #2
    Join Date
    Dec 2004
    Location
    UK
    Posts
    2,358
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Quote Originally Posted by jscheuer1
    randimageindex=parseInt(Math.random()*fadeimages.length)
    Using the parseInt function to truncate a floating point number is very inefficient. The number would first have to be converted to a string, then parsed as an integer, and finally being returned as a number. Use Math.floor instead.

    while (randimageindex==nextimageindex){
    randimageindex=parseInt(Math.random()*fadeimages.length)
    if (randimageindex!==nextimageindex)
    break
    }
    Why break out of the loop in the way you're attempting to do so? It would happen automatically anyway when the expression is evaluated at the top of the loop.

    Code:
    var randimageindex;
    
    do {
      randimageindex = Math.floor((Math.random() % 1) * fadeimages.length);
    } while(randimageindex == nextimageindex);
    
    /* or:
     *
     * while(nextimageindex == (randimageindex = Math.floor((Math.random() % 1) * fadeimages.length)));
     */
    
    nextimageindex = randimageindex;
    The OP can ignore this bit...

    to keep the code from using more stack space than it needs, [declare randimageindex local]
    Though the declaration is a good idea, it isn't for the reasons you cite. In the absence of the declaration, the variable would be created as a property of the global object; it wouldn't take any "stack" space at all. However, the creation of globals should always be avoided if possible as that tends to lead to more reusable, more robust code. With the declaration, the variable would be created as a property of the function object's variable object.

    Mike

  3. #3
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,070
    Thanks
    44
    Thanked 3,216 Times in 3,178 Posts
    Blog Entries
    12

    Default

    I deleted my message that Mike is commenting on above. Upon further testing it didn't work with more than three images. If I figure out the problem, which has nothing to do with Mike's comments, as far as I can tell, I will post a working randomizer.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  4. #4
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,070
    Thanks
    44
    Thanked 3,216 Times in 3,178 Posts
    Blog Entries
    12

    Default

    Still suffering from Mike's problems, here is the new code, same as the old code, it was my testing that was flawed, the code works fine.

    Just after this line:

    Code:
    function fadepic(){
    add this line:

    Code:
    var randimageindex
    Replace this line:

    Code:
    nextimageindex=(nextimageindex<fadeimages.length-1)? nextimageindex+1 : 0
    with these lines:

    Code:
    randimageindex=parseInt(Math.random()*fadeimages.length)
    while (randimageindex==nextimageindex){
    randimageindex=parseInt(Math.random()*fadeimages.length)
    if (randimageindex!==nextimageindex)
    break
    }
    nextimageindex=randimageindex
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  5. #5
    Join Date
    Apr 2005
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Hi

    thanks to both of you for your help, this is excellent. I have used this bit now and it seems to work fine. It looks like the first and second image that is displayed is always the same, but then it seems to randomize subsequent images.

    Question: What is the difference between the two versions of WHILE conditions?


    Code:
    var randimageindex;
    
    do {
      randimageindex = Math.floor((Math.random() % 1) * fadeimages.length);
    } while(randimageindex == nextimageindex);
    
    /* or:
     *
     * while(nextimageindex == (randimageindex = Math.floor((Math.random() % 1) * fadeimages.length)));
     */
    
    nextimageindex = randimageindex;

  6. #6
    Join Date
    Dec 2004
    Location
    UK
    Posts
    2,358
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Quote Originally Posted by orbit1877
    It looks like the first and second image that is displayed is always the same, but then it seems to randomize subsequent images.
    The script initialises using hard-coded indicies. You could randomise these, but I think there's a better solution which wouldn't require modification of the script, per se: shuffling. Rather than randomly choosing values from a set, randomise the set itself. You could either do it once at the start, or repeatedly.

    The three functions below define a two new methods for array objects: shuffle and swap. The former randomly orders the elements of that object, and the latter is just a utility function that swaps two elements.

    Code:
    function random(n) {
      return Math.floor((Math.random() % 1) * n);
    }
    
    Array.prototype.shuffle = function() {var i = this.length;
      while(i--) {this.swap(i, random(i + 1));}
    };
    Array.prototype.swap = function(x, y) {
      var t = this[x]; this[x] = this[y]; this[y] = t;
    };
    After you've defined the fadeimages array using the original, unmodified script, call fadeimages.shuffle() and you should always have a randomised sequence.

    Question: What is the difference between the two versions of WHILE conditions?
    Both statements are functionally equivalent. I prefer the do..while version as it's clearer, but as I was replacing John's while statement I thought I'd show an equivalent.

    If you use the shuffle approach above, neither are necessary.

    Mike

  7. #7
    Join Date
    Apr 2005
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    great idea! perfect! thanks heaps :-)

  8. #8
    Join Date
    Aug 2004
    Posts
    9,902
    Thanks
    3
    Thanked 967 Times in 955 Posts
    Blog Entries
    15

    Default

    Great discussion. I had planned on updating Fade In Slideshow with a randomize display order feature, but decided to put it off until next month since I got side tracked. But here's the preview of the code, which seems very similar to Mwinter's:

    Code:
    ////NO need to edit beyond here/////////////
    
    var randomizeimage="yes" //randomize dislay order of images? "yes" or "no"
    
    function shuffleit(){ 
    return Math.floor((Math.random()*fadeimages.length-1)) 
    }
    
    if (randomizeimage=="yes")
    fadeimages.sort(shuffleit)
    As you can see, simply add the code right below the "////No need to edit///" divider of the script. Function shuffleit() is key here.

  9. #9
    Join Date
    Dec 2004
    Location
    UK
    Posts
    2,358
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Quote Originally Posted by ddadmin
    function shuffleit(){
    return Math.floor((Math.random()*fadeimages.length-1))
    }

    if (randomizeimage=="yes")
    fadeimages.sort(shuffleit)
    That's not necessarily a good approach. It should shuffle the array, but it may not. Before I explain, could I make a quick suggestion? Rather than perform a string comparison when choosing to sort, why not use booleans instead. I think

    Code:
    var randomiseImage = false; /* Set to true to randomise the image order. */
    
    /* ... */
    
    if(randomiseImage) {/* ... */}
    should be quite understandable to anyone: experienced programmer or not. I also think it's better use of the language.

    Now, back to the point. The sort method expects three sorts of values from the comparison function: numbers that are either less than, greater than, or equal to zero. The shuffleit function above only returns the latter two. A better approach would be:

    Code:
    fadeimages.sort(
      function() {return 0.5 - Math.random();}
    );
    The comparison function would now randomly return a value between -0.5 (exclusive) and 0.5 (inclusive), which might have a better chance of creating a mess.

    But. Taking the sort method approach might not work. It could depend on what sort algorithm is implemented by the host. Whilst it's shorter - both in code length and execution time - it might produce sub-standard results.

    Mike
    Last edited by mwinter; 04-26-2005 at 10:22 PM. Reason: Corrected minor error: first => latter

  10. #10
    Join Date
    Aug 2004
    Posts
    9,902
    Thanks
    3
    Thanked 967 Times in 955 Posts
    Blog Entries
    15

    Default

    Hi Mwinter:

    Before I explain, could I make a quick suggestion? Rather than perform a string comparison when choosing to sort, why not use booleans instead.
    I agree Booleans is a better approach. However I used a string instead just in case I needed it to support values other than "yes" or "no", such as "backwards" as far as the sequence of the images. But I agree Boolean would be a better approach in general.

    Thanks for the info on the sort algorithm. I haven't really given my own code too much thought nor testing apart from seeing that it worked, so I'll take your word that there are some problems with it. I'll try and dissect your code some more as soon as I have the time. Thanks for that.

Bookmarks

Posting Permissions

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