Random Logo in Header

[Daniel]

What This Does
This will make a random logo which you select appear on the top of your board.

You must have JavaScript enabled.

Now let's get started, shall we?
Go to your admincp and open up the "header" template.

At the very begining of your header template, add:
<SCRIPT LANGUAGE="JavaScript">

<!-- Begin Random Logo In Header Script

var theImages = new Array() // do not change this

<!-- Edit the url images to match yours
theImages[0] = 'http://www.yoursite.com/forum/images/banner1.gif'
theImages[1] = 'http://www.yoursite.com/forum/images/banner2.gif'



var j = 0
var p = theImages.length;
var preBuffer = new Array()
for (i = 0; i < p; i++){
preBuffer[i] = new Image()
preBuffer[i].src = theImages[i]
}
var whichImage = Math.round(Math.random()*(p-1));
function showImage(){
document.write('<div align="center"><a href="index.php"><img src="'+theImages[whichImage]+'" border="0" alt="$vboptions[bbtitle]" /></a></div>');
}

// End -->
</script>

Find: <a name="top"></a>
<table border="0" width="$stylevar[outertablewidth]" cellpadding="0" cellspacing="0" align="center">
<tr>
<td align="$stylevar[left]" class="logobg"><a href="$vboptions[forumhome].php?$session[sessionurl]"><img src="$stylevar[titleimage]" border="0" alt="$vboptions[bbtitle]" /></a></td>
</tr>
</table>
And replace it with: <SCRIPT LANGUAGE="JavaScript">


<!-- Begin
showImage();
// End --></script>
And you're done

To add more images, go back to:
theImages[1] = 'http://www.yoursite.com/forum/images/banner2.gif'
And after, you can add:
theImages[2] = 'http://www.yoursite.com/forum/images/banner3.gif'
And so on.

I know this can be done with a plugin or some sort of installer, but since I have no idea on how to do that, I suppose there won't be one unless someone creates one, or until I figure out how.

If you would like to recieve updates on this modification, please click the 'Install' button.

Daniel
www.mmoccforum.com

[attroll]

Daniel

Could this be incorperated into a vBadvanced module?

[attroll]

I figured out how to get it working in vBadvanced. Now my question is, how can you get it to hyperlink the graphic you have. What I mean is I want the users to be able to click on the banner that pops up and have it take them to the sponsors web site.

[AndyA]

This is a mod for changing the Forum logo and not a banner mod right ?

[spongebobrox128]

I could probably make a plugin of it, but that would involve rewriting it.
I am also probably younger then anyone would think (10 years old)
I will work on it later if you want

[sim tech]

Sounds like a great mod to allow various business ads and notices to appear in the header, which is a great idea. I've been wanting to provide something like this for any of my members who made a donation to help keep my site up.

I'll be watching for this to become a plugin. Thanks!

[Daniel]

@attroll - I have some sort of idea on how to do that, but I'm at school right now so I won't be able to test it out. Once I get home I will.

@AndyA - The modification is for the logo, but I suppose it could be used for a banner aswell.

@Sponge - Thank you, if you have any updates on it, feel free to post here or PM me.
And if you're 10, good on you! I didn't even know how to use the bold tag when I was 10 :P I turned 14 about a month ago.

[spongebobrox128]

Ok, could you get on AIM as soon as you can?
And, I decided not to make a plugin but an installer because you would need to specify your images, so you would have to edit something for a plugin to work.
I am almost done, I just have to work out one small bug :)
K, can someone tell me why after it auto-edits template (DB) I have to go to template manager, goto the header template, and click OK for it to work? Because this is really weird...

[dn lodge]

nice hack

[Daniel]

@Sponge - No idea

@Attroll - I tried one test on it, didn't work too well. I'll work on it more over the weekend.

[attroll]

OK thanks Daniel.

[attroll]

Danial

I found this that will work also for random pictures or banners.


<script language="Javascript"><!--
function image() {
};
image = new image();
number = 0;
// imageArray
image[number++] = "<a href='http://www.domain.net'><img src='http://www.domain.net/picture1.gif' border='0'></a>"
image[number++] = "<a href='http://www.domain.net'><img src='http://www.domain.net/picture2.gif' border='0'></a>"
image[number++] = "<a href='http://www.domain.net'><img src='http://www.domain.net/picture3.jpg' border='0'></a>"
image[number++] = "<a href='http://www.domain.net'><img src='http://www.domain.net/picture4.gif' border='0'></a>"
image[number++] = "<a href='http://www.domain.net'><img src='http://www.domain.net/picture4.jpg' border='0'></a>"

// Carry on adding images - as many as you want
increment = Math.floor(Math.random() * number);
document.write(image[increment]);
//-->
</script>


But I liked the direction yours was heading in. With the one line you could place anywhere like this:


<SCRIPT LANGUAGE="JavaScript">


<!-- Begin
showImage();
// End --></script>

[spongebobrox128]

*Sighs*, why cannot anyone write there own scripts (not vB hacks (leave that to coders who are expericend with vB), but JS is pretty simple)
Random Image Scripts with links or with out are really simple. This will work for links (put this in top of headinclude) <script type='text/javascript'> function randImage() { images = new array(); links = new array(); images[0] = 'http://mysite.com/mybanner.gif'; links[0] = 'http://mysite.com/service/'; images[1] = 'http://mysite.com/cool.gif'; links[1] = 'http://mysite.com/cool.html'; var randIndex = Math.round(Math.random()*(images.length-1)); document.write("<a href='" + links[randIndex] + "'><img src='" + links[randIndex] + "'></a>"); return true; } </script> In Header Under "<!-- logo -->" put: <script type='text/javascript'> randImage(); </script> images[x] and links[x] are matching, so if you have images[1] configured to a banner for your hosting services, and you have a specific page for that banner, links[1] would be THE FULL URL to that page.And I just wrote this, and I didn't test it, so there may be a few errors. Tell me if it doesn't work.

[stinger2]

wel if this is going to turn to installer it will be a hit.......nice work guys

[GrendelKhan{TSU]

10? 14? man, all of a sudden, I feel very old :/ lol :p

When I was ten... "tag" meant making a 'touch' when playing 'Tag' (as in, "TAG! you're it!!"). Making a "Bold tag" would be doing so aggresively and using a fancy word like "bold".

as in, "Wow! that was a bold tag! nice one! I guess I'm it!. RUN!"

lol :p :D



(ie: Nice work guys!! this will be very useful!)


<<< /me awaits plugin/product. :)

[admiralapril]

Thank you! :)

I look forward to a plugin for this too, but with the template changes it works nicely.

Ten and fourteen, wow. I'm very impressed.

[CSS59]

Daneil, I can't get this to align with a 3 paert fluid logo.

Here is the code
<!-- new logo -->
<table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse" width="100%" align="center">

<tr>
<td width="390">
<img border="0" src="http://www.cardraft.com/themes/original/tunerleft.jpg" width="390" height="70"></td>
<td width="100%" height="70" background="http://www.cardraft.com/themes/original/tunercenter.jpg">
</td>
<td width="390" border="0">

<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
showImage();
// End --></script>

</td>
</tr>
</table>
<!-- end new logo -->

you can see it on my test site at http://cardraft.com (not vb cuz it's my test site for php but i have 3 vb's)


can you help me align the 3? They were aligned b4 i put in the script.

[Daniel]

Daneil, I can't get this to align with a 3 paert fluid logo.

Here is the code
<!-- new logo -->
<table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse" width="100%" align="center">

<tr>
<td width="390">
<img border="0" src="http://www.cardraft.com/themes/original/tunerleft.jpg" width="390" height="70"></td>
<td width="100%" height="70" background="http://www.cardraft.com/themes/original/tunercenter.jpg">
</td>
<td width="390" border="0">

<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
showImage();
// End --></script>

</td>
</tr>
</table>
<!-- end new logo -->

you can see it on my test site at http://cardraft.com (not vb cuz it's my test site for php but i have 3 vb's)


can you help me align the 3? They were aligned b4 i put in the script.
Talked over via AIM.

[CSS59]

here is a simple one that I ended up using.
http://photomatt.net/scripts/randomimage

[ambumann]

Great one, installed here!

[Gripemaster]

I LOVE THIS HACK!!! My only question is... how do I center the headers? As soon as I figure out how to center them the install button will be happily clicked! :)

[attroll]

This is a great hack Daniel. But the only problem I had with it was that you could not click on the banner and have it bring you to the web site that you were advertising. All it did was display a banner. Most people that user banners using them to advertise and they want users to go the advertisors web site. You can not do this unless you have the banner as a active link.

I created this little hack here that seems to do it all. This hack may have room for improvement but it is basic and the banners rotate and are active links.
https://vborg.vbsupport.ru/showthread.php?t=106682

[Smiry Kin's]

i can't seem to find the first bit..

im using element skin.

Find:

<a name="top"></a>
<table border="0" width="$stylevar[outertablewidth]" cellpadding="0" cellspacing="0" align="center">
<tr>
<td align="$stylevar[left]" class="logobg"><a href="$vboptions[forumhome].php?$session[sessionurl]"><img src="$stylevar[titleimage]" border="0" alt="$vboptions[bbtitle]" /></a></td>
</tr>
</table>



And replace it with:

<SCRIPT LANGUAGE="JavaScript">


<!-- Begin
showImage();
// End --></script>

please help

[Smiry Kin's]

anyhelp?

[Daniel]

i can't seem to find the first bit..

im using element skin.

Find:

<a name="top"></a>
<table border="0" width="$stylevar[outertablewidth]" cellpadding="0" cellspacing="0" align="center">
<tr>
<td align="$stylevar[left]" class="logobg"><a href="$vboptions[forumhome].php?$session[sessionurl]"><img src="$stylevar[titleimage]" border="0" alt="$vboptions[bbtitle]" /></a></td>
</tr>
</table>



And replace it with:

<SCRIPT LANGUAGE="JavaScript">


<!-- Begin
showImage();
// End --></script>

please help
I don't have any experience with the element skin, but it's just replacing
<!-- Begin
showImage();
// End --> with the image that displays your logo.

[MarkyD]

I LOVE THIS HACK!!! My only question is... how do I center the headers? As soon as I figure out how to center them the install button will be happily clicked! :)

that's my issue as well. How do I center?

[tbaleno]

I changed the line

document.write('<img src="'+theImages[whichImage]+'">');

to

document.write('<center><img src="'+theImages[whichImage]+'"></center>');

I don't know if thats the cleanest way to do it but thats what I did.

[MarkyD]

I changed the line

document.write('<img src="'+theImages[whichImage]+'">');

to

document.write('<center><img src="'+theImages[whichImage]+'"></center>');


I don't know if thats the cleanest way to do it but thats what I did.
thanks so much! that did the trick.

[tbaleno]

One comment. I found that when you don't have javascript enabled it shows no image at all. So what I have done is found:

<SCRIPT LANGUAGE="JavaScript">

<!-- Begin
showImage();
// End --></script>

And added this right after:


<no script>
<center><img src='/images/put_your_default_image_name_here'></center>
</no script>


I think this should work to keep the site consistant when a non java script enabled person visits your site. Also note that the <center> and </center> are optional. I just use them on my board because I like my logo centered.

[Daniel]

Nice idea, thanks for sharing. :)

And thanks tbaleno for helping out.

[MarkyD]

Once I get to theImages[10], it doesn't seem to display anything higher than a value of 9. Am I missing something? I just added my 10th image for rotation, and sat there and hit reload for like 10 minutes...and never saw 10 or 11 appear...but it rotated fine thru 1-9. Any ideas?

[attroll]

This using this code. You can add as many rotating banners that you want.


<!-- Begin rotating ad code -->
<script language="Javascript"><!--
function image() {
};
image = new image();
number = 0;
// imageArray
image[number++] = "<a href='http://www.yoursite.net/forum/payments.php'><img src='http://www.yoursite.net/forum/sponsors/donatebanner.gif' border='0'></a>"
image[number++] = "<a href='http://www.hikersupply.com'><img src='http://www.yoursite.net/forum/sponsors/hikersupply.gif' border='0'></a>"
image[number++] = "<a href='http://www.modelt.net'><img src='http://www.yoursite.net/forum/sponsors/modeltbanner.gif' border='0'></a>"
image[number++] = "<a href='http://appalachiantrailservices.com/'><img src='http://www.yoursite.net/forum/sponsors/atservicesbanner.gif' border='0'></a>"
image[number++] = "<a href='http://www.thepacka.com/'><img src='http://www.yoursite.net/forum/sponsors/cedartreebanner.gif' border='0'></a>"
// Carry on adding images - as many as you want
increment = Math.floor(Math.random() * number);
document.write(image[increment]);
//-->
</script>
<!-- End rotating ad code -->

[maharajah]

anyone been able to make this clickable yet ?

.

[sim tech]

disregard... sorry

[maharajah]

Worked out the Clickable ...

REPLACE:

document.write('<div align="center"><img src="'+theImages[whichImage]+'"></div>');

With


document.write('<div align="center"><a href="FORUM URL"><img src="'+theImages[whichImage]+'" border = "0"></a></div>');



And Replace FORUM URL with your url....

:)


.

[rareclownfish]

installed, but having some issues. How can i take out the boxline around the image.
picture here.....http://www.rareclownfish.com/forums/index.php

I want it to look like this http://www.rareclownfish.com/modules.php?name=Jig

[Roms]

rareclownfish;

You need to include the: border = "0"


in your code to remove the link border.... Hope that helps. :)

[rareclownfish]

rareclownfish;

You need to include the: border = "0"


in your code to remove the link border.... Hope that helps. :)

Where in the code?

[Daniel]

I updated the code, it should be fine now. :) It now links to index.php and has a border. Sorry, sort of forgot about this thing or would have done it sooner :P

[rareclownfish]

thanks will try it now.

[rareclownfish]

Perfect! :)

[hotwheels]

very nice

[is mise]

*Sighs*, why cannot anyone write there own scripts (not vB hacks (leave that to coders who are expericend with vB), but JS is pretty simple)
Random Image Scripts with links or with out are really simple. This will work for links (put this in top of headinclude) <script type='text/javascript'> function randImage() { images = new array(); links = new array(); images[0] = 'http://mysite.com/mybanner.gif'; links[0] = 'http://mysite.com/service/'; images[1] = 'http://mysite.com/cool.gif'; links[1] = 'http://mysite.com/cool.html'; var randIndex = Math.round(Math.random()*(images.length-1)); document.write("<a href='" + links[randIndex] + "'><img src='" + links[randIndex] + "'></a>"); return true; } </script> In Header Under "<!-- logo -->" put: <script type='text/javascript'> randImage(); </script> images[x] and links[x] are matching, so if you have images[1] configured to a banner for your hosting services, and you have a specific page for that banner, links[1] would be THE FULL URL to that page.And I just wrote this, and I didn't test it, so there may be a few errors. Tell me if it doesn't work.


A few typos. This worked, though:

function randImage() {
var images = new Array();
var links = new Array();
images[0] = 'http://www.mysite.com/graphics/23.jpg';
links[0] = 'http://www.appleinsider.com';
images[1] = 'http://www.mysite.com/graphics/20.jpg';
links[1] = 'http://macrumors.com';
var randIndex = Math.round(Math.random()*(images.length-1));
document.write('<a href="' + links[randIndex] + '"><img src="' + images[randIndex] + '" border="0"></a>');
return true;
}

[defcon_420]

This using this code. You can add as many rotating banners that you want.


<!-- Begin rotating ad code -->
<script language="Javascript"><!--
function image() {
};
image = new image();
number = 0;
// imageArray
image[number++] = "<a href='http://www.yoursite.net/forum/payments.php'><img src='http://www.yoursite.net/forum/sponsors/donatebanner.gif' border='0'></a>"
image[number++] = "<a href='http://www.hikersupply.com'><img src='http://www.yoursite.net/forum/sponsors/hikersupply.gif' border='0'></a>"
image[number++] = "<a href='http://www.modelt.net'><img src='http://www.yoursite.net/forum/sponsors/modeltbanner.gif' border='0'></a>"
image[number++] = "<a href='http://appalachiantrailservices.com/'><img src='http://www.yoursite.net/forum/sponsors/atservicesbanner.gif' border='0'></a>"
image[number++] = "<a href='http://www.thepacka.com/'><img src='http://www.yoursite.net/forum/sponsors/cedartreebanner.gif' border='0'></a>"
// Carry on adding images - as many as you want
increment = Math.floor(Math.random() * number);
document.write(image[increment]);
//-->
</script>
<!-- End rotating ad code -->


Nice simple and it works :) thanks!

[Ahsin1]

cool nice modification... thanx...

installed @ www.DesiOutlaws.net

[xtreme2]

pretty cool... all I am wondering is how would you get it to replace the forum logo?

http://forums.probe-enthusiast.com/

that is my forum... since my forum logo is routed into the heading, where would I put it? I got lazy and instead of changing the coding for my forum banner to be displayed, I just changed the filename so that it replaced the original logo.

Let me know...

[Binoy]

Nice mod...what if i want to have random lgo in my header ?

can someone help me in this ?

[legion_diabolic]

Nothing in the vbull documentation, nothing in search, certainly nothing in the admincp under vbull options or any other logical category I can think of. The only reference to javascript whatsoever has to do with external data sydication ie. including vbull data as html in an external document.

[Daniel]

pretty cool... all I am wondering is how would you get it to replace the forum logo?
http://forums.probe-enthusiast.com/

that is my forum... since my forum logo is routed into the heading, where would I put it? I got lazy and instead of changing the coding for my forum banner to be displayed, I just changed the filename so that it replaced the original logo.

Let me know...
Nice mod...what if i want to have random lgo in my header ?

can someone help me in this ?

Find in header
<!-- logo -->
<a name="top"></a>
<table border="0" width="$stylevar[outertablewidth]" cellpadding="0" cellspacing="0" align="center">
<tr>
<td align="$stylevar[left]"><a href="$vboptions[forumhome].php$session[sessionurl_q]"><img src="$stylevar[titleimage]" border="0" alt="$vboptions[bbtitle]" /></a></td>
<td align="$stylevar[right]">
&nbsp;
</td>
</tr>
</table>
<!-- /logo -->
and replace with

<SCRIPT LANGUAGE="JavaScript">

<!-- Begin Random Logo In Header Script

var theImages = new Array() // do not change this

<!-- Edit the url images to match yours
theImages[0] = 'http://www.yoursite.com/forum/images/banner1.gif'
theImages[1] = 'http://www.yoursite.com/forum/images/banner2.gif'



var j = 0
var p = theImages.length;
var preBuffer = new Array()
for (i = 0; i < p; i++){
preBuffer[i] = new Image()
preBuffer[i].src = theImages[i]
}
var whichImage = Math.round(Math.random()*(p-1));
function showImage(){
document.write('<div align="center"><a href="index.php"><img src="'+theImages[whichImage]+'" border="0" alt="$vboptions[bbtitle]" /></a></div>');
}

// End -->
</script>

<!-- output logo -->
<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
showImage();
<!-- end -->
</script>
change the image paths accordingly.

[Daniel]

Nothing in the vbull documentation, nothing in search, certainly nothing in the admincp under vbull options or any other logical category I can think of. The only reference to javascript whatsoever has to do with external data sydication ie. including vbull data as html in an external document.
The end user must have javascript enabled.

[bada_bing]

Nice reserved for later use

[Wabuf]

This is perfect! Thanks

[GrandAmGuru]

I'm using the following version of the code

<script language="Javascript"><!--
function image() {
};
image = new image();
number = 0;
// imageArray
image[number++] = "<a href='http://www.domain.net'><img src='http://www.domain.net/picture1.gif' border='0'></a>"
image[number++] = "<a href='http://www.domain.net'><img src='http://www.domain.net/picture2.gif' border='0'></a>"
image[number++] = "<a href='http://www.domain.net'><img src='http://www.domain.net/picture3.jpg' border='0'></a>"
image[number++] = "<a href='http://www.domain.net'><img src='http://www.domain.net/picture4.gif' border='0'></a>"
image[number++] = "<a href='http://www.domain.net'><img src='http://www.domain.net/picture4.jpg' border='0'></a>"

// Carry on adding images - as many as you want
increment = Math.floor(Math.random() * number);
document.write(image[increment]);
//-->
</script>

and I can't for the life of me get the right code to center the image. I've tried all sorts of things in the document.write(image[increment]); line. Help!

nevermind. found it.

document.write("<center>",image[increment]);

[attroll]

I'm using the following version of the code

<script language="Javascript"><!--
function image() {
};
image = new image();
number = 0;
// imageArray
image[number++] = "<a href='http://www.domain.net'><img src='http://www.domain.net/picture1.gif' border='0'></a>"
image[number++] = "<a href='http://www.domain.net'><img src='http://www.domain.net/picture2.gif' border='0'></a>"
image[number++] = "<a href='http://www.domain.net'><img src='http://www.domain.net/picture3.jpg' border='0'></a>"
image[number++] = "<a href='http://www.domain.net'><img src='http://www.domain.net/picture4.gif' border='0'></a>"
image[number++] = "<a href='http://www.domain.net'><img src='http://www.domain.net/picture4.jpg' border='0'></a>"

// Carry on adding images - as many as you want
increment = Math.floor(Math.random() * number);
document.write(image[increment]);
//-->
</script>

and I can't for the life of me get the right code to center the image. I've tried all sorts of things in the document.write(image[increment]); line. Help!

nevermind. found it.

document.write("<center>",image[increment]);
It looks like your using the code form this hack, https://vborg.vbsupport.ru/showthread.php?t=106682

Have you tried putting a <center> in front and a <center> at the end of the script?

[SFertitta72]

This is a nice little hack.

However, how do I get the images to stretch across the entire length of the page? Is there a way to make this have a separate left image (that doesnt change) and a right one that does?

Thanks in advance.