www.webdeveloper.com
Results 1 to 9 of 9

Thread: randomly rotate multiple banners

  1. #1
    Join Date
    Feb 2007
    Posts
    10

    randomly rotate multiple banners

    Unless I have misunderstood what I've read so far on the subject, I haven't found the javascript I'm looking for (yet).

    I have a blog where I have hand-selected advertisers to post banners in a sidebar. Say there are 10 total banners; accordingly, there are 10 potential positions for a banner to be as they cascade down the sidebar. I would like the banners to change position within the sidebar with each pageload. So a banner in pos. #10 might be in pos. #3 with a new pageload, for example. Every banner should be visible on every pageload, despite position.

    I have only discovered scripts that rotate x-number of banners in 1 position. I thought about using such a script to create 10 separate modules, all exactly the same. But the possibility that the same banner might be "up" in two positions at the same time is not desirable, and every banner must be seen/loaded each time the page is viewed...regardless of position in the sidebar. And each banner must have the potential to move from the bottom to the top to the middle, etc. I am delineating by price/position for advertisers.

    I can't use php or cgi as my blog host doesn't support these two. Javascript is best.

    THANK YOU FOR YOUR HELP!

  2. #2
    Join Date
    May 2004
    Location
    FL
    Posts
    3,447
    Try this one. It was meant to display a random number out of a total but you can just make it do all ten.

    The following portion of the code determines how many ads to display. Just change the variable "z" to "0":
    Code:
    var randomorder=new Array()
    var the_one
    var z=0
    for (i=0;i<targetarray.length;i++)
    randomorder[i]="i"
    That way the prder will be changed each time.
    Lee

    ""Men occasionally stumble over the truth, but most of them pick themselves up and hurry off as if nothing ever happened."" -- Sir Winston Churchill

  3. #3
    Join Date
    Feb 2007
    Posts
    10
    I am not having much luck with this. Tried several fixes to no avail.

    My blog host is typepad. In order to add extra scripts like this, you have to add them to modules, which are then called like a SSI to the sidebar where you want it. I've done a very similar script for an email sign-up. Worked great.

    On this one, I can't get the banner images to come up. Tried adding the adblock directly to the script, instead of making it a separate .js file. Didn't work. Tried calling the randomAds.js file to the module script (as the instructions say). Didn't work. In each of these instances, the title of the section came up...just nothing underneath it.

    I can't give up on this....I've "wasted" too much time on it already....any other suggestions.

    Thanks.

  4. #4
    Join Date
    Jan 2005
    Posts
    3,067
    Well, you can do it two ways. If you are not using a naming format, or the images are not on your server then you can do it like this:
    Code:
    <html>
    <head>
    <script type="text/javascript">
    var URLs = new Array();
    URLs[0] = "http://www.mysite.com/banners/first.jpg";
    URLs[1] = "http://www.someothersite.com/images/banners/affiliate.jpg";
    URLs[2] = "http://www.anothersite.com/small_banner.jpg";
    
    function rotate(){
    var ran;
    var used = new Array();
    var i=0;
    
    while(i<URLs.length)
    {
    ran = Math.floor(Math.random()*URLs.length);
    for(var j=0;j<=used.length;j++)
    {
    if(j==used.length){
    document.getElementById('affil'+i).src = URLs[ran];
    used[i]=ran;
    i++;
    break;
    }
    else if(used[j]==ran)
    break;
    }
    }
    return true;
    }
    </script>
    </head>
    <body onload="rotate()">
    <img id="affil0">
    <img id="affil1">
    <img id="affil2">
    </body>
    </html>
    if they are on your server, and you are using a naming format, such as banner1.jpg, banner2.jpg, then you can get rid of the URLs array and simply using a string in your function . . . of course the above function will also work in this case.

    I only used 3 images, but you can do more.

  5. #5
    Join Date
    Jan 2005
    Posts
    3,067
    Or you can also do it so that they all appear in the same order, but start with a random one each time, which is what Lee's script is good for.

  6. #6
    Join Date
    Feb 2007
    Posts
    10
    how critical are the spaces and semi-colons in script? In yours, you have a space on either side of your = sign (where the URLs are listed). Lee's doesn't. also, you have a ; at the end of almost every line; Lee's doesn't. And you use a " around your image path; Lee's using only '. Are these subtle differences no matter to the code working properly?

    Will yours work the way I described in my initial post?

    I have my images on the server, but I still have to do a hard link to get them so I have them listed like this:

    adblock[0] = '<a href="http://www.somesite.com"><img src="http://www.mysite.com/images/sponsor_banners/somesite.gif" border="0" alt="somesite.com"></a>'

  7. #7
    Join Date
    Jan 2005
    Posts
    3,067
    spaces dont matter in JS, and the ; is not necessary, but is supported, and is good programming practive, since many other languages, such as PHP require it. In the case of my script, you can either include the images in strings, as you have above, either via JS, or PHP, or you can have them on the page already and then just use my code to update them, since that is what it is designed for. Lee's code will choose a random # and then most likely keep them in order, meaning if a 4 is generated your images will be in the order of:

    4
    5
    6
    7
    8
    9
    10
    1
    2
    3

    Where as my code will keep the all random, so you might get:

    3
    7
    2
    9
    4
    6
    10
    5
    1
    8

    My code is set up to use images that have IDs of:

    affil0
    affil1
    affil2
    .
    .
    .
    affilN <-- where n can be any number

  8. #8
    Join Date
    Feb 2007
    Posts
    10
    Yahooo! I did get Lee's code to work. There were a few things I had to change:
    (1) I didn't create a sep. file for the adblock; I included this in my <head> instead.
    (2) then in the body section, this line was changed accordingly:
    <body

    <script language="Javascript" type="text/javascript" src="adblock"></script>
    <p align="center">
    <script>
    randomorder(adblock, '<br><br>')
    </script>
    </p>

    </body>

    B/c this located in a typepad blog, it presented (to me) a unique application. Typepad does not provide tech support for anything like this...so they could only tell me where to put the file and how to call it once it was created. And b/c it was put into a page that already has <html> and <head> tags, I had to delete these....

    Hope this helps someone! I REALLY, REALLY appreciate your assistance!

  9. #9
    Join Date
    May 2012
    Posts
    1
    Wow, posted 5 years ago and it's the only script I could find that rotates banners in different positions. Thanks.

    What I would like to know is how I can add a separate link to each of the images/banners.

    Quote Originally Posted by konithomimo View Post
    Well, you can do it two ways. If you are not using a naming format, or the images are not on your server then you can do it like this:
    Code:
    <html>
    <head>
    <script type="text/javascript">
    var URLs = new Array();
    URLs[0] = "http://www.mysite.com/banners/first.jpg";
    URLs[1] = "http://www.someothersite.com/images/banners/affiliate.jpg";
    URLs[2] = "http://www.anothersite.com/small_banner.jpg";
    
    function rotate(){
    var ran;
    var used = new Array();
    var i=0;
    
    while(i<URLs.length)
    {
    ran = Math.floor(Math.random()*URLs.length);
    for(var j=0;j<=used.length;j++)
    {
    if(j==used.length){
    document.getElementById('affil'+i).src = URLs[ran];
    used[i]=ran;
    i++;
    break;
    }
    else if(used[j]==ran)
    break;
    }
    }
    return true;
    }
    </script>
    </head>
    <body onload="rotate()">
    <img id="affil0">
    <img id="affil1">
    <img id="affil2">
    </body>
    </html>
    if they are on your server, and you are using a naming format, such as banner1.jpg, banner2.jpg, then you can get rid of the URLs array and simply using a string in your function . . . of course the above function will also work in this case.

    I only used 3 images, but you can do more.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles