In order to display multiple banners in single spot (and to keep web site from becoming tacky), you will need some sort of client side script that will display first one banner, then the second one etc. This is called banner animator (or even ad animator). In this case, the functionality is written in JavaScript, with some help of HTML (for element positioning) and CSS (for element appearance).

What does that have to do with Lotus Notes?

Absolutely nothing. The only connection to Lotus Notes is, when you integrate this functionality into your database. It is a simple and trivial solution. I needed to create a form that will represent one single banner. This form contains name, URL, image, sort order etc. Look-up view for obtaining sorted banner list was created and some web forms that are already in “production” had to be altered, for loading of JavaScript class etc.

Prerequisites

This functionality depends heavily on jQuery library. It can be obtained here. I recommend minified version if you plan on hosting it yourself or, you can use Google Code link to link it from Google.

Next you need to obtain the adPlayer library. It is located here. I would ask you to not link the library directly from this link, but download it to your server and link it from there.

Getting started

In order to implement this application, you will first need to make a small HTML adjustment in the place where you want banner animator to be implemented.

<ul id="adPlayer">
    <li><a href=""><img src="images/ad1.jpg" /></a></li>
    <li><a href=""><img src="images/ad2.jpg" /></a></li>
    <li><a href=""><img src="images/ad3.jpg" /></a></li>
</ul>
<div id="adPlayerNav"></div>

Obviously you should insert link of your desire. The same goes for image src and alt parameters. Also, number of li elements can vary.

Next, at the bottom of the page (where your JS libraries are loaded and on load events are set), you need to load both .js files (jQuery and AdPlayer) , if you do not already have them. Next, add following (or if you already have onload event loader, just call loadPlayer() function).

<script type="text/javascript" language="javascript">
    $(document).ready(function() {
        loadPlayer();
    });
</script>

Now add some style

It is necessary to add styling to content thus far. CSS excerpt below will give you some idea as to how you can style things. Beware that #adPlayer height property must be set to height of a banner space. Also, some tweaking to .js file will have to be done, but nothing major (this will definitely be changed in future releases).

/* layout */
#adPlayer { list-style: none; height: 220px; margin-left: 0;
margin-bottom: 0; overflow: hidden; padding: 0; }
#adPlayer li { margin: 0; padding: 0; }
#adPlayerNav { position: relative; top: -1em; right: 1em;
text-align: right; }
#adPlayerNav ul { list-style: none; margin: 0; padding: 0; }
#adPlayerNav li { display: inline; margin: 0 0 0 0.1em;
padding: 0; }
#adPlayerNav li.adPlay, #adPlayerNav li.adPause {
margin-left: 1em; }
#adPlayerNav li a { cursor: pointer; padding: 0 0.5em; }

/* typography */
#adPlayerNav li { font-size: 1.2em; }

/* color */
#adPlayerNav li { border: solid 1px rgb(213, 213, 217); }
#adPlayerNav li a { background-color: white; padding: 0.5em; }

You now have fully functional banner animator.

Optimization

Loading 3+ 50K+ images in the middle of the page can never be a good thing. Thus, adPlayer library has a dynamic mode that can be used. This mode loads images after the page is loaded, which is a good thing. However, you cannot leave your banner space empty until then. A compromise solution is to load first banner in-line and all others after the document is loaded. Your HTML file must now look somewhat like this:

...
<ul id="adPlayer">
    <li><a href=""><img src="images/ad1.jpg" /></a></li>
</ul>
<div id="adPlayerNav"></div>
...
<script type="text/javascript" language="javascript">
    $(document).ready(function() {
        loadPlayer( true );
        adplayer.add ("", "images/ad2.jpg", "");
        adplayer.add ("", "images/ad3.jpg", "");
        adplayer.generatePlayer();
    });
</script>

Loading loadPlayer method with true as parameter value will enable dynamic mode. Now you can add banners in desired sort order. First parameter is link, second image src and third image alt. After you are done, just call generatePlayer method.