How do I make my banner periodically refresh to another random banner?

Question

I have a site which shows an ad banner upon page load. I'd like for it to also change while someone is viewing the site, maybe after a few minutes?

This is my current code which displays the initial banner using PHP:

$path = '/images/adbanners/'; 
$banners = array( 
array( 'src' => 'look.jpg', 
'href' => 'http://www.example.com/look'), 
array( 'src' => 'see.jpg', 
'href' => 'http://www.example.com/see'), 
array( 'src' => 'horse.jpg',
'href' => 'http://www.example.com'), 
array( 'src' => 'scg.png', 
'href' => 'https://www.example.com/scg/'), 
array( 'src' => 'karen.png', 
'href' => 'http://www.example.com/'karen), 
); 

$rnd = mt_rand(0,count($banners)-1); // Pick a random array index.  They start with 0, so you have to -1. 
$href = $banners[$rnd]['href'];  // Link HREF 
$src = $path.$banners[$rnd]['src']; // Image source 
$randombanner = '<a href="'.$href.'" target="_blank" alt="example.com Sponsor!" title="example.com Sponsor!"><img border="0" src="'.$src.'" /></a>'; 
vB_Template::preRegister('navbar', array('randombanner' => $randombanner));  

I have an idea that this could be accomplished using JavaScript but don't know where to start. I'd rather not add a library such as jQuery to the site, as it doesn't already use it for anything.

Answer 1

I would suggest sending a list of other ads as JSON, and then using JS to swap it. You could do that with a setInterval. This is a little bit trickier without jQuery, do you have any other libraries on the site?

For the PHP, add

$ads_json=json_encode($banners);

underneath where you declare the $banners array.

Change your banner element to have an ID so we can access it via JS easily.

$randombanner = '<a id="sponsor_banner" href="'.$href.'" target="_blank" alt="example.com Sponsor!" title="example.com Sponsor!"><img border="0" src="'.$src.'" /></a>'; 

Then add to the $randombanner html...

<script>
    var ads='.$ads_json.';
    function swap_ad(){
        var ad_el=document.getElementById("sponsor_banner");
        var img=ad_el.getElementsByTagName('img')[0];
        var random_ad=ads[Math.floor(Math.random()*items.length)];
        ad_el.href=random_ad["href"];
        img.src='.$path.'random_ad["src"];
        };
    window.setInterval(swap_ad,90000000);
</script>

It would be nice to put the script in the head. Putting it by the element will work though, not sure about the limitations of vBulletin.

Answer 2

If you want to load a new iframe every 5 minutes, just use setInterval:

window.adverts = [
    {src:'look.jpg', href:'http://www.example.com/look'},
    {src:'see.jpg', href:'http://www.example.com/see'},
    //etc
];
setInterval(function() {
    var rnd = Math.floor(Math.random() * adverts.length);
    var banner = document.getElementById('bannerId');
    banner.getElementByTagName('img')[0].src = adverts[rnd].src;
    banner.href = adverts[rnd].href;
}, 5 * 60 * 1000);

This will require you to add id="bannerId" to your banner's surrounding <a> tag. You can also change the 'bannerId' in the script to any other id if you like, and then add another id to your banner.

That will store all the adverts' image sources and anchor urls in a global object adverts and then run the code to switch to another random advert every 5 minutes. You just need to put this script within a <script> tag on your html page. You can instead of manually adding the urls also just inject the urls via PHP, by instead something like this to define the global adverts variable:

window.adverts = [
    <?php
        echo json_encode($banners)
    ?>
];

That automatically puts all the contents from your $banners variable into the JavaScript adverts variable.

Answer 3

PHP is a server-side language whose work is done when your page loads. However, there are some solid tutorials available from sites like htmlgoodies which will help you with what you're looking for.

Look at this tutorial here: http://www.htmlgoodies.com/beyond/javascript/article.php/3881826

Answer 4

use a timeout. Documentation for a time is at https://developer.mozilla.org/en-US/docs/Web/API/Window.setTimeout

Basically you set a timeout function to call you function that changes the banner after a set number of milliseconds.

window.setTimeout(function() {
    // call to function to rotate or change banner
}, ms);

Does this help? Or are you looking for the full example in JS.