Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

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:

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.

share|improve this question

1 Answer 1

up vote 0 down vote accepted

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

share|improve this answer
    
Thanks BandonRandon, I have tried it and works like a charm sorry for the late reply. I did not know about the cycle plugin although having used jQuery for almost three years. –  navanitachora Dec 30 '11 at 4:01

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.