TalkPHP - View Single Post

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.

10-04-2009, 05:03 PM	#1 (permalink)
Tanax The Prestige Join Date: Sep 2007 Location: Sweden, Stockholm Posts: 1,080 Thanks: 115	Timebased event 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. __________________