full size background jQuery with randomly selected background per page - Themes by bavotasan.com

Amp

Hi Bavotasan

Using your lovely jQuery fullscale bg image script. Is there a way to randomly change the image form a bank of say 5 with each page click/refresh? I have seen your more static solution on the post 'full size background jQuery with different background per page' on 29 March but I am after something that the user interacts with.

I was looking at something like this for the image selection.

<script language="JavaScript">
<!--
		images = new Array(5);
		images[0] = "<body id='background1'></body>";
		images[1] = "<body id='background2'></body>";
		images[2] = "<body id='background3'></body>";
		images[3] = "<body id='background4'></body>";
		images[4] = "<body id='background5'></body>";
		index = Math.floor(Math.random() * images.length); document.write(images[index]);
 // -->
</script>

Then this for the bank of images in the css

#background1 {
	background: url(http://xxxxxx.com/images/bg1.gif);
}
#background2 {
	background: url(http://xxxxxx.com/images/bg2.gif);
}

Then the page where the jQuery funciton is called

<img src="images/bg.jpg" alt="" id="background" />
<div id="maincontent">
 
    <div id="box">
        <h1>Full Size Background Image jQuery Plugin</h1>
        <h2>Demo</h2>
        Just resize this window and you will see the plugin in action. Whenever the window size changes, the background image size changes. AND it always stays in the proper aspect ratio.
	    <p><a href="http://bavotasan.com/?p=1748">&laquo; back to tutorial</a></p>
    </div>
</div>
<script type="text/javascript">
$(window).load(function() {
	$("#background").fullBg();
});
 
</script>

I would appreciate any pointers you could give me.

Many thanks!

cbavota

You can't use this plugin with a CSS background image. The image has to be loaded as an image in an image tag. If you wanted to randomize it with each page reload, you would have to use PHP to randomize which image src appears in the image tag.

Hey there!

Categories

In this Discussion

Tagged