Random Background Image, Javascript.

Discussion forum for MOD Writers regarding MOD Development.
Locked
moff158
Registered User
Posts: 22
Joined: Sun Nov 30, 2008 7:42 pm

Random Background Image, Javascript.

Post by moff158 » Tue Sep 08, 2009 2:09 am

Hey guys,

Need a little help writing the appropriate Javascript to load a random background image for my forums found at:
http://www.chesterfieldexplorer.com/phpBB3/index.php

The rest of the site (http://www.chesterfieldexplorer.com/index.php) has a random background image (try refreshing any page and the background image should change), but I generate the random background using php. That said I know nothing about JS.

What I need is a line that looks like this in overall_header.html:

Code: Select all

<style type="text/css">body{background-image: url(/images/background_image7.jpg); background-repeat: no-repeat;}</style>
Only the actual URL needs to be randomly chosen, i.e. /images/background_image n .jpg, where n is a random integer.

Since overall_header.html is a .html file I dont think <?php ?> tags are parsed by the server, but <script></script> tags are.

Thanks for the help.

iBotPeaches
Registered User
Posts: 131
Joined: Tue Jul 24, 2007 12:38 am
Location: Vahalla
Contact:

Re: Random Background Image, Javascript.

Post by iBotPeaches » Tue Sep 08, 2009 2:26 am

I used some Javascript rotate back in the day. Heres the source, just modify it to fit your own needs.

Code: Select all

<SCRIPT LANGUAGE="JavaScript">

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

theImages[0] = 'img/noo1.png'
theImages[1] = 'img/noo2.png'
theImages[2] = 'img/noo3.png'
theImages[3] = 'img/noo4.png'
theImages[4] = 'img/noo5.png'

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('<img src="'+theImages[whichImage]+'"/>');
}
</script>
<script type="text/javascript">
Image

moff158
Registered User
Posts: 22
Joined: Sun Nov 30, 2008 7:42 pm

Re: Random Background Image, Javascript.

Post by moff158 » Tue Sep 08, 2009 2:46 am

Hey,

Thanks a ton iBotPeaches!

Didn't work perfect as you had shown, made a few minor modifications myself and got it to work as expected.

For the sake of completeness (in case someone stumbles upon this thread looking to do the same thing to their forums) I have included the exact code I used below:


In overall_header.html Find:

Code: Select all

<body id="phpbb" class="section-{SCRIPT_NAME} {S_CONTENT_DIRECTION}">
Add after:

Code: Select all

<script type="text/javascript">

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

	theImages[0] = '/images/background_image.jpg'
	theImages[1] = '/images/background_image1.jpg'
	theImages[2] = '/images/background_image2.jpg'
	theImages[3] = '/images/background_image3.jpg'
	theImages[4] = '/images/background_image4.jpg'
	theImages[5] = '/images/background_image5.jpg'
	theImages[6] = '/images/background_image6.jpg'
	theImages[7] = '/images/background_image7.jpg'
	theImages[8] = '/images/background_image8.jpg'
	theImages[9] = '/images/background_image9.jpg'
	theImages[10] = '/images/background_image10.jpg'

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));

document.write('<style type="text/css">body{background-image: url('+theImages[whichImage]+'); background-repeat: no-repeat;}</style>');

</script>
Thanks again iBotPeaches!

-moff158

mvmsk
Registered User
Posts: 36
Joined: Sun Feb 12, 2012 12:17 pm

Re: Random Background Image, Javascript.

Post by mvmsk » Tue Mar 26, 2013 1:23 pm

thanks a ton! I was lookinf for this easy one :)
Proud Admin of NolanTalk

Oo Alias oO
Registered User
Posts: 35
Joined: Wed Jul 13, 2011 10:57 am

Re: Random Background Image, Javascript.

Post by Oo Alias oO » Sun Mar 31, 2013 5:11 pm

Another way to do it would be to apply a random class name to the <body>, then you can call it in your css file which would save messing around with the template file.

Locked

Return to “[3.0.x] MOD Writers Discussion”