Rotating Banners?

[Flash04jv]

Our Ad widget is full with image banners at the top of our home page, anymore will make the page look too crowded, and we have more people soon to join as sponsors. What would be the best way to overcome this issue?

A code or way to automatically rotate our banners would be best. Does that exist?

[Mark.B]

No, this is not a feature of vBulletin 5, sorry.

[Flash04jv]

Darn, ok thanks.

[twistsol]

There is a free ad server that lets you set up your own ads and serve them to your site. You can then set up an ad module with one bit of code and it receives the ads randomly from the ad server. It's based on PHP and MySQL. In my testing it ran pretty well along side VB5 on the same server.

https://www.revive-adserver.com

I've tested the 3.x version of this with VB 5.2.1 and I didn't have any issues other than that the initial setup was a bit tedious. You should be able to call it from VB Cloud since it works like any other ad service, but you would need to set up your own server to install the product ... which then kind of defeats the point of having your site on VB cloud.

[Flash04jv]

Thanks for the response, but yes, this does not sounds ideal.

[Flash04jv]

I found a code I have been tweaking and have it down to the code provided below. I can use this and get what I want, a single rotating banner. By adding the code a few times into the AD Widget, using different url's so the same banners never show at the same time, I can get as many banners to rotate as I want.

Problem I have is, the margins do not make the images the same size, like the ad code I am using now does. For the life of me I can not get a margin code to work in here. Must be a difference in this code and the css or html code I have now.

<script type="text/javascript"><!--

banners=
[
"<a href=\"brentbailar.fbfs.com\" target=\"_blank\"><img src=\"https://www.nefga.org/core/css/0/0/1/9/4/1//images/UNKLoper.jpeg\" width=\"180\" height=\"144\" alt=\"Brent Bailar\" title=\"Brent Bailar\" border=\"0\"></a>",
"<a href=\"http://www.antelopecreekwp.com/\" target=\"_blank\"><img src=\"http://www.nefga.org/core/css/0/0/1/9/4/1//images/Antelope Creek.jpg\" width=\"180\" height=\"144\" alt=\"Antelope Creek\" title=\"Antelope Creek\" border=\"0\"></a>",
"<a href=\"https://lakebigmacspoiled.com/\" target=\"_blank\"><img src=\"http://www.nefga.org/core/css/0/0/1/9/4/1//images/lakemacspolied.jpg\" width=\"180\" height=\"144\" alt=\"Lake Big Mac Spolied\" title=\"Lake Big Mac Spolied\" border=\"0\"></a>",
"<a href=\"http://www.kayakjak.com/\" target=\"_blank\"><img src=\"http://www.nefga.org/core/css/0/0/1/9/4/1//images/KayakJak.jpg\" width=\"180\" height=\"144\" alt=\"KayakJak\" title=\"KayakJak\" border=\"0\"></a>",
"<a href=\"http://merritttradingpost.com/\" target=\"_blank\"><img src=\"http://www.nefga.org/core/css/0/0/1/9/4/1//images/Merritt.jpg\" width=\"180\" height=\"144\" alt=\"Merritt Trading Post\" title=\"Merritt Trading Post\" border=\"0\"></a>",
"<a href=\"https://www.facebook.com/boatdockne\" target=\"_blank\"><img src=\"http://www.nefga.org/core/css/0/0/1/9/4/1//images/Boat Dock.jpg\" width=\"180\" height=\"144\" alt=\"The Boat Dock\" title=\"The Boat Dock\" border=\"0\"></a>"
]
randomNumber = Math.random()
var show_banners = banners[Math.floor(randomNumber * banners.length)]
document.write(show_banners);
// --></script>

Here is the size and margins I would like to add to this code, but it's format just won't let it happen. The image will not display not matter what I try to do, the width and height are fine in the code, but I need to margins set to make it consistent.

style="height: 144px; width: 180px; margin: 0px 1px

My current Ad Widget Code:

<center>
<a class="0" href="https://www.facebook.com/boatdockne"><strong><img border="0"  src="http://www.nefga.org/core/css/0/0/1/9/4/1//images/Boat Dock.jpg" style="height: 144px; width: 180px; margin: 0px 1px" /></strong></a>

<a class="0" href="http://merritttradingpost.com/"><strong><img border="0" src="http://www.nefga.org/core/css/0/0/1/9/4/1//images/Merritt.jpg" style="height: 144px; width: 180px; margin: 0px 1px" /></strong></a>

<a class="0" href="http://www.kayakjak.com/"><strong><img border="0" src="http://www.nefga.org/core/css/0/0/1/9/4/1//images/KayakJak.jpg" style="height: 144px; width: 180px; margin: 0px 1px" /></strong></a>

<a class="0" href="https://lakebigmacspoiled.com/"><strong><img border="0" src="http://www.nefga.org/core/css/0/0/1/9/4/1//images/lakemacspolied.jpg" style="height: 144px; width: 180px; margin: 0px 1px" /></strong></a>

<a class="0" href="http://www.antelopecreekwp.com/"><strong><img border="0" src="http://www.nefga.org/core/css/0/0/1/9/4/1//images/Antelope Creek.jpg" style="height: 144px; width: 180px; margin: 0px 1px" /></strong></a>

<a class="0" href="brentbailar.fbfs.com"><strong><img border="0" src="https://www.nefga.org/core/css/0/0/1/9/4/1//images/UNKLoper.jpeg" style="height: 144px; width: 180px; margin: 0px 1px" /></strong></a><center>

If any of you code folks see something easy I can do to make that margin work, I would greatly appreciate it.

[glennrocksvb]

Try adding this to the img style attribute.

display: inline-block;

[Flash04jv]

Thanks for the suggestion! I'll try it tonight.

[Flash04jv]

I added that in there, right after the height and width, but nothing changed. When I used this code, no photo:

display: inline-block;

When I used this code, they showed back up, but were the same, all different sizes:

display: inline-block"

I really wish I could just substitute the sizing and have it work, I would be done. Anyway I can just add this? The images won't show when I replace the width and height with this:

style="height: 144px; width: 180px; margin: 0px 1px"

[glennrocksvb]

Could you post a link to the page with the banner.

[Flash04jv]

Here is the home page of our forum: http://www.nefga.org

As you can see, the banners are nice and all the same size, using the code without the JavaScript posted above. Just a basic photo with URL link when clicked.

That JavaScript code I posted takes away the uniform size. I'll add the code and screen shot it in a bit so you can see what I mean

[Macro Man]

Have you tried simply adding a class and handling the css in the style editor instead?

e.g.

<center>
<a class="0" href="https://www.facebook.com/boatdockne"><strong><img border="0"  src="http://www.nefga.org/core/css/0/0/1/9/4/1//images/Boat Dock.jpg" class="header-advert" /></strong></a>
<!-- other ads here -->
</center>

and in your css custom style

.header-advert {
    height: 144px !important;
    width: 180px !important;
    margin: 0px 1px !important;
}

[Flash04jv]

Have you tried simply adding a class and handling the css in the style editor instead?

I just tried that using the rotating banner code. All of the images were still off sized. Maybe I'm not following how to make that work? I put the rotating banner code into the AD Widget area, and the header-advert margins code you provided into CSS.

Adding screen shots for my next comment now, I know this would be useful for more people than just me, maybe someone already has it figured out, I can't find it tho.

[Flash04jv]

Here is the good AD sizing, NON-Rotating banner, with the code I currently have in the AD Widget module. Noticed the images are perfectly aligned with the space on all sides.

<center>
<a class="0" href="https://www.facebook.com/boatdockne"><strong><img border="0"  src="http://www.nefga.org/core/css/0/0/1/9/4/1//images/Boat Dock.jpg" style="height: 144px; width: 180px; margin: 0px 1px" /></strong></a>

<a class="0" href="http://merritttradingpost.com/"><strong><img border="0" src="http://www.nefga.org/core/css/0/0/1/9/4/1//images/Merritt.jpg" style="height: 144px; width: 180px; margin: 0px 1px" /></strong></a>

<a class="0" href="http://www.kayakjak.com/"><strong><img border="0" src="http://www.nefga.org/core/css/0/0/1/9/4/1//images/KayakJak.jpg" style="height: 144px; width: 180px; margin: 0px 1px" /></strong></a>

<a class="0" href="https://lakebigmacspoiled.com/"><strong><img border="0" src="http://www.nefga.org/core/css/0/0/1/9/4/1//images/lakemacspolied.jpg" style="height: 144px; width: 180px; margin: 0px 1px" /></strong></a>

<a class="0" href="http://www.antelopecreekwp.com/"><strong><img border="0" src="http://www.nefga.org/core/css/0/0/1/9/4/1//images/Antelope Creek.jpg" style="height: 144px; width: 180px; margin: 0px 1px" /></strong></a>

<a class="0" href="brentbailar.fbfs.com"><strong><img border="0" src="https://www.nefga.org/core/css/0/0/1/9/4/1//images/UNKLoper.jpeg" style="height: 144px; width: 180px; margin: 0px 1px" /></strong></a><center>

And here is the AD sizing, WITH the Rotating banner code I am working with. Pasted 5 times into the AD widget to get all 5 images up. Refreshing the page rotates them nicely. But notice the poor sizing.

<script type="text/javascript"><!--

banners=
[
"<a href=\"brentbailar.fbfs.com\" target=\"_blank\"><img src=\"https://www.nefga.org/core/css/0/0/1/9/4/1//images/UNKLoper.jpeg\" width=\"180\" height=\"144\" alt=\"Brent Bailar\" title=\"Brent Bailar\" border=\"0\"></a>",
"<a href=\"http://www.antelopecreekwp.com/\" target=\"_blank\"><img src=\"http://www.nefga.org/core/css/0/0/1/9/4/1//images/Antelope Creek.jpg\" width=\"180\" height=\"144\" alt=\"Antelope Creek\" title=\"Antelope Creek\" border=\"0\"></a>",
"<a href=\"https://lakebigmacspoiled.com/\" target=\"_blank\"><img src=\"http://www.nefga.org/core/css/0/0/1/9/4/1//images/lakemacspolied.jpg\" width=\"180\" height=\"144\" alt=\"Lake Big Mac Spolied\" title=\"Lake Big Mac Spolied\" border=\"0\"></a>",
"<a href=\"http://www.kayakjak.com/\" target=\"_blank\"><img src=\"http://www.nefga.org/core/css/0/0/1/9/4/1//images/KayakJak.jpg\" width=\"180\" height=\"144\" alt=\"KayakJak\" title=\"KayakJak\" border=\"0\"></a>",
"<a href=\"http://merritttradingpost.com/\" target=\"_blank\"><img src=\"http://www.nefga.org/core/css/0/0/1/9/4/1//images/Merritt.jpg\" width=\"180\" height=\"144\" alt=\"Merritt Trading Post\" title=\"Merritt Trading Post\" border=\"0\"></a>",
"<a href=\"https://www.facebook.com/boatdockne\" target=\"_blank\"><img src=\"http://www.nefga.org/core/css/0/0/1/9/4/1//images/Boat Dock.jpg\" width=\"180\" height=\"144\" alt=\"The Boat Dock\" title=\"The Boat Dock\" border=\"0\"></a>"
]
randomNumber = Math.random()
var show_banners = banners[Math.floor(randomNumber * banners.length)]
document.write(show_banners);
// --></script>

[Macro Man]

Here's a jsFiddle to show another way of doing it: https://jsfiddle.net/zzf5vjdm/

[Flash04jv]

Looks like something to try. I'll see if I can get it figured out tonight.