Changing Header Image Every N Minutes/Seconds

1 Views

I am trying to change the header image every “n” second/minutes. Have looked at a number of solutions on the web and am at present using the PHP code fragment below available at http://ma.tt/scripts/randomimage/:

It still only changes the image on a page reload not every ‘n’ minutes. I have also seen the post at:

Read More

How to rotate the header image per day?

However, I do not know how to adapt it to do what I want.

Could you please lend me some pointers on how to go about it as I am very new to PHP.

Moreover, would this be better done in JavaScript of PHP?

Thanks in advance.

Post Views: 1

Related posts

Leave a Reply

1 comment

  1. To answer your question, in my opinion you would be way better using JavaScript. jQuery can be a great tool to do this. I would suggest installing the jQuery Cycle Plugin. into your theme. You can still load the images into your theme with PHP but if you want to change the image without needing to reload the page you’ll be best off using JavaScript.

    Something like this:
    Add jQuery and jQuery Cycle by adding this code to your functions.php 

        <?php
function my_scripts_method() {
    wp_enqueue_script('jquery');
    wp_register_script( 'jcycle', 'http://ajax.aspnetcdn.com/ajax/jquery.cycle/2.99/jquery.cycle.all.min.js'); //register the Microsoft cdn copy of jcycle this could also be your local copy
    wp_enqueue_script('jcycle');
  }    

add_action('wp_enqueue_scripts', 'my_scripts_method'); //
?>

    See wp enqueue script and Microsoft CDN for jCycle more info

    Then add this to your header.php 

    <head>
<script type="text/javascript">
jQuery(document).ready(function($) {
    $('#header').cycle({
        fx: 'fade', //your effect
                random: 1, //make it random
                timeout: 5000 // change header every 5 seconds

    });
});
</script>
</head>
<body>
    <div id="Header">
        <img src="beach1.jpg" width="200" height="200" />
        <img src="beach2.jpg" width="200" height="200" />
        <img src="beach3.jpg" width="200" height="200" />
    </div>
</body>

    There are other jQuery/JavaScript slideshows/cycle plugins but I think this will get you on the right track