Results 1 to 4 of 4

Thread: Rotating Images By Percentage using Javascript

  1. #1
    Join Date
    Sep 2009
    Posts
    33
    Thanks
    9
    Thanked 0 Times in 0 Posts

    Default Rotating Images By Percentage using Javascript

    Im trying to rotate images using javascript. These images also contain URLs. The following script rotates them randomly on refresh and does so perfectly. Is there a way to append the code to give higher priority to images using percentage? Like out of 5 images, one is shown 50% of the time on refresh, and the the rest rotate 10% equally?

    HTML Code:
    <script type="text/javascript">
    
    //store the quotations in arrays
    var images = [], 
    index = 0;
    images[0]="<a href='URL1'><img style='border:none;' src='IMAGE1'/></a>";
    images[1]="<a href='URL2'><img style='border:none;' src='IMAGE2'/></a>";
    images[2]="<a href='URL3'><img style='border:none;' src='IMAGE3'/></a>";
    images[3]="<a href='URL4'><img style='border:none;' src='IMAGE4'/></a>";
    images[4]="<a href='URL5'><img style='border:none;' src='IMAGE5'/></a>";
    
    index = Math.floor(Math.random() * images.length);
    document.write(images[index]);
    //done
    </script>
    Thanks

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,030
    Thanks
    44
    Thanked 3,211 Times in 3,173 Posts
    Blog Entries
    12

    Default

    I think you would need 6 images for that. But it's easy enough to have one image whose chance is 50% and have the others 'fight' for the slot when that one image isn't being shown:

    Code:
    <script type="text/javascript">
    
    //store the quotations in arrays
    var images = [], 
    index = Math.floor(Math.random() * 2);
    images[0]="<a href='URL1'><img style='border:none;' src='IMAGE1'/></a>";
    images[1]="<a href='URL2'><img style='border:none;' src='IMAGE2'/></a>";
    images[2]="<a href='URL3'><img style='border:none;' src='IMAGE3'/></a>";
    images[3]="<a href='URL4'><img style='border:none;' src='IMAGE4'/></a>";
    images[4]="<a href='URL5'><img style='border:none;' src='IMAGE5'/></a>";
    
    index = index? 0 : Math.floor(Math.random() * (images.length - 1)) + 1;
    document.write(images[index]);
    //done
    </script>
    images[0] will be shown half the time, when it isn't being shown, one of the others will be randomly selected to be shown.
    - John
    ________________________

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

  3. The Following User Says Thank You to jscheuer1 For This Useful Post:

    aaronrusso (10-31-2013)

  4. #3
    Join Date
    Sep 2009
    Posts
    33
    Thanks
    9
    Thanked 0 Times in 0 Posts

    Default

    Thanks for the reply! But is there a way to make it so out of 5 (or even 6) have different percentages? For example, "image[0]" would display 50% of the time on refresh, "image[1]" would display 30% of the time, "image[2]" would display 10% of the time, "image[3]" would display 5% of the time and "image[4]" would display 5% of the time too? If all the values need to be different, its not a problem having 3 and 4 display 6-4% respectively. Just wanted to know if that was possible. Thanks!

  5. #4
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,030
    Thanks
    44
    Thanked 3,211 Times in 3,173 Posts
    Blog Entries
    12

    Default

    Just to be clearer about the code in my previous post - The image[0] one will display 50% of the time in random fashion. Of the 4 others, they will as a group display 50% of the time in random fashion. 50/4 is 12.5, so each will display 12.5% of the time. It's possible to break it down further, but the code gets more complex. A different approach might be in order:

    Code:
    <script type="text/javascript">
    //store the images' html and percent in the images array as objects
    var images = [], limit = 0, imagepointer = -1,
    index = Math.floor(Math.random() * 100);
    images[0] = {html: "<a href='URL1'><img style='border:none;' src='IMAGE1'/></a>", percent: 50};
    images[1] = {html: "<a href='URL2'><img style='border:none;' src='IMAGE2'/></a>", percent: 30};
    images[2] = {html: "<a href='URL3'><img style='border:none;' src='IMAGE3'/></a>", percent: 10};
    images[3] = {html: "<a href='URL4'><img style='border:none;' src='IMAGE4'/></a>", percent: 5};
    images[4] = {html: "<a href='URL5'><img style='border:none;' src='IMAGE5'/></a>", percent: 5};
    
    while (++imagepointer < images.length){
    	limit += images[imagepointer].percent;
    	if(index < limit){
    		document.write(images[imagepointer].html);
    		break;
    	}
    }
    //done
    </script>
    Last edited by jscheuer1; 11-01-2013 at 06:47 AM. Reason: minor code change
    - John
    ________________________

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

  6. The Following User Says Thank You to jscheuer1 For This Useful Post:

    aaronrusso (11-01-2013)

Similar Threads

  1. rotating images (no link)
    By ksk226 in forum Looking for such a script or service
    Replies: 7
    Last Post: 06-10-2010, 08:51 AM
  2. Changing the Pixels to Percentage in JavaScript
    By Abbster22 in forum JavaScript
    Replies: 4
    Last Post: 01-12-2010, 04:38 AM
  3. rotating images like on Amazon.com
    By travels in forum Looking for such a script or service
    Replies: 7
    Last Post: 03-28-2008, 05:07 PM
  4. Rotating Images Script
    By kalli123 in forum Looking for such a script or service
    Replies: 1
    Last Post: 10-25-2007, 02:48 AM
  5. rotating and enlarging images
    By starry2010 in forum Other
    Replies: 2
    Last Post: 10-11-2007, 02:20 PM

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
  •