Timebased event

Tanax · 10-04-2009, 05:03 PM

Hi.

I have a header image I want to switch between several images by calling a PHP-script.

Currently I have it changing image when clicking on the header-element(just to test that it actually works).

HTML Code:

	<?php echo link_js('static/js/HeaderChanger.js'); ?>
</head>
<body>

	<div id="container">

		<div id="header">

			<div id="head"><img src="<?php echo $this->gallery->getRandom(); ?>" height="200" /></div>
			<div id="logo"><img src="static/img/logo.jpg" /></div>

		</div>

javascript Code:

$(document).ready(function(){

    
    $("#head").click(function() {
    
        $("#head").load("HeaderChanger.php");
    
    });
    
 });

php Code:

<?php


    include('includes/config.php');
    
?>

    <img src="<?php echo $gallery->getRandom(); ?>" height="200" />

This works great, it changes header when I click on it.
However I want this to be timebased and not clickbased. I want it to change automatically every x seconds.

Also it would be cool to have it transitioned like the first image is faded out, and the new one is faded in.

How would I do that?
I'm using jQuery btw.