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.

adamdecaf · 10-04-2009, 06:08 PM

javascript Code:

$(document).ready(function() {

  // This will hold our timer
  var myTimer = {};

    // Set the timer for 2 seconds
    myTimer = $.timer(2000, function(){

      // Load the new image.
      $("#head").load("HeaderChanger.php");

   });

});

I'm giving credit to ETbyrne for his jQuery Timer Plugin. Just change the "2000"(ms) to how ever long you want the delay to last.

Attached you will find the zip file that contains the entire plugin distribution. VirusTotal Scan

Tanax · 10-04-2009, 07:58 PM

Thanks, that worked quite well.
However, it doesn't work exactly how I want it to.

You see, that only changes the header once. I want it to change every x seconds.
I tried to make a hack for it like this:

javascript Code:

$(document).ready(function() {

    function myfunction()
    {
        
        // This will hold our timer
        var myTimer = {};
        
        myTimer = $.timer(2000, function(){

            // Load the new image.
            $("#head").load("HeaderChanger.php");

        });
    
    }
    
    while(true)
    {
    
        setTimeout("myfunction()", 2000);
    
    }

});

however that only seems to work twice because it changes 2 times after the page loaded. Then it doesn't change anymore..
Any ideas?

ETbyrne · 10-04-2009, 08:05 PM

Add myfunction() after you load the new image:

Code:

$(document).ready(function() {

    function myfunction()
    {
        
        // This will hold our timer
        var myTimer = {};
        
        myTimer = $.timer(2000, function(){

            // Load the new image.
            $("#head").load("HeaderChanger.php");

            myfunction();

        });
    
    }
    
    while(true)
    {
    
        setTimeout(myfunction(), 2000);
    
    }

});

Also, for this particular application you may want to consider using the more simple Delay Plugin.

Btw how do you do the javascript code coloring?

Tanax · 10-04-2009, 08:14 PM

Did like this actually, but your point worked.

javascript Code:

$(document).ready(function() {

    var time = 7000;

    function myfunction()
    {
    
        // This will hold our timer
        var myTimer = {};
            
        myTimer = $.timer(time, function(){

            // Load the new image.
            $("#head").load("HeaderChanger.php");
            
            myfunction();

        });
        
    }
    
    myfunction();

});

Oh, and you use highlight=javascript but in [] and then /highlight within [].

Now I'm just wondering how to do a fading transition between the images when it's loading a new image?

ETbyrne · 10-04-2009, 08:24 PM

To do fading would require that you somehow load the image into a hidden element which would then gradually appear over the old image. When the new image is then in place remove the element containing the old image.

adamdecaf · 10-05-2009, 09:14 PM

Quote:

Originally Posted by ETbyrne

To do fading would require that you somehow load the image into a hidden element which would then gradually appear over the old image. When the new image is then in place remove the element containing the old image.

Or you load an animated .gif file followed (timed) by the second image.

ETbyrne · 10-06-2009, 01:05 PM

That would definitely be less technical, but the effect would probably be less crisp.