9 replies to this topic

[Iceprinceafterschool]

hi how can i do a header randomizer on my forum?? like each time the members refresh or come to my forum they'll have different headers each time??
thanks in advance

[Bitter]

I think that would be a JavaScript trick. It's not necessarily anything that can be done using the default code.

After a quick Google search, I came across this. It might not be perfect or work but if you just search for "JavaScript image randomizer" I'm sure you can find a bunch of options. Hope this helps!

http://www.web-sourc...ndom_images.htm

[nylyon]

I just did this today...  Here's my code, hope it helps..  It goes into the default header

<script LANGUAGE="JavaScript">

<!-- Display numerous images as RedSquare headers  Karl Lyon	   -->
<!-- Originally made for the header contest but maybe it should stay -->

<!-- Begin
// Set up the image files to be used.
var theImages = new Array() 
// To add more image files, continue with the
// pattern below, adding to the array.

theImages[0] = 'http://yourbanner.com/Banners/banner3.jpg'
theImages[1] = 'http://yourbanner.com/Banners/banner9.gif'
theImages[2] = 'http://yourbanner.com/Banners/banner23.jpg'
theImages[3] = 'http://yourbanner.com/Banners/banner24.jpg'
theImages[4] = 'http://yourbanner.com/Banners/banner27.jpg'
theImages[5] = 'http://yourbanner.com/Banners/banner28.gif'


// do not edit anything below this line

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('<a href="{$this->settings['board_url']}" title="Board Home"><img src="'+theImages[whichImage]+'">');
}

//  End -->
</script>

<div id='logostrip' align='center'>
<!--<a href='{$this->settings['board_url']}' title='Board Home'><img src='http://default.img/logo.gif' -->
  <script LANGUAGE="JavaScript">

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

[Iceprinceafterschool]

can you show me the results?? like how does it look like?

[nylyon]

This is my test forum it's not always available but hopefully you can check...

https://www.nylyon.com

Just refresh your browser, and the logo should change.

Edited by nylyon, 14 November 2011 - 03:13 AM.

[Martin]

I would have coded it like this. "logostrip" is not the correct ID to use for the logo.

<script type="text/javascript">

<!-- Display numerous images as RedSquare headers  Karl Lyon	   -->
<!-- Originally made for the header contest but maybe it should stay -->

<!-- Begin
// Set up the image files to be used.
var theImages = new Array() 
// To add more image files, continue with the
// pattern below, adding to the array.

theImages[0] = 'http://yourbanner.com/Banners/banner3.jpg';
theImages[1] = 'http://yourbanner.com/Banners/banner9.gif';
theImages[2] = 'http://yourbanner.com/Banners/banner23.jpg';
theImages[3] = 'http://yourbanner.com/Banners/banner24.jpg';
theImages[4] = 'http://yourbanner.com/Banners/banner27.jpg';
theImages[5] = 'http://yourbanner.com/Banners/banner28.gif';


// do not edit anything below this line

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]
}

$( document ).observe( 'dom:loaded', function()
{
	whichImage = Math.round(Math.random()*(p-1));
	$$( '#branding a[rel~="home"] img' )[0].writeAttribute( 'src', theImages[ whichImage ] );
});

//  End -->
</script>

(Can be placed in any template)

[Sandi]

You don't need that much code, nor do you need javascript.

For example if you have four logo images, say logo1.png, logo2.png, logo3.png and logo4.png. Upload all of the images to the /public/sytle_images folder.

Edit your skin template "defaultHeader"

Change:

<a href='{$this->settings['board_url']}' title='{$this->lang->words['go_home']}' rel="home" accesskey='1'><img src='{parse replacement="logo_img"}' alt='{$this->lang->words['logo']}' /></a>

To:

<a href='{$this->settings['board_url']}' title='{$this->lang->words['go_home']}' rel="home" accesskey='1'>
	<if test="$random_number = rand(1, 4)">
		<img src='{style_images_url}/logo{$random_number}.png' alt='{$this->lang->words['logo']}' />
	</if>
</a>

The second number in rand(1, 4) must be how many images you are rotating.

Basically the same as a tutorial I did for v2.3.x here.

[Iceprinceafterschool]

@Sandi thank you so it will be different when it is refreshed??

[nylyon]

Now that's an easier way.  Think I'm in for a change!

[Sandi]

Iceprinceafterschool, on 15 November 2011 - 08:07 PM, said:

@Sandi thank you so it will be different when it is refreshed??

Yes, although there is nothing saying that the rand function cannot pick the same number again. Doubt it would happen often... well 25% chance with 4 images I guess.

However you could save the old number ( $old_number = $random_number ) and have it pick again if they are the same.