Support » Themes and Templates » help with rotating header

  • I want to add some JQuery rotating header functionality to the child theme I created from the twentyten parent theme. I did some google searching and came up with adding this to functions.php to link to JQuery.

    [code]
    <?php
    function my_scripts_method() {
    wp_deregister_script( ‘jquery’ );
    wp_register_script( ‘jquery’, ‘http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js’);
    wp_enqueue_script( ‘jquery’ );
    }

    add_action(‘wp_enqueue_scripts’, ‘my_scripts_method’);
    ?>
    [/code]

    and this to the header.php above wp_head();

    [code]
    <?php wp_enqueue_script(‘jquery’); ?>
    <script type=”text/javascript”>
    counter = 1;
    num_images = 2; // Enter the number of images to rotate
    dir = “<?php bloginfo(‘template_url’); ?>/images/headers”; // This is where your images are stored

    function rotateHeader() {

    var header_img = ‘(‘ + dir + ‘/header_’ + counter + ‘.png)’; // jpg, png, or gif

    jQuery(‘header’).css(‘background-image’, header_img); // .art-Header-jpeg is the div you want to replace
    counter++; if (counter > num_images) counter = 1;
    }

    </script>
    [/code]

    also add this to the body tag
    [code]
    onLoad=”javascript:setInterval( ‘rotateHeader()’, 10000 );”
    [/code]

    and this right after the body tag.

    [code]

    <div style=”width:1px; height:1px; display:none;”>
    <img src=”<?php bloginfo(‘template_url’); ?>/images/headers/Leaves.png” />
    <img src=”<?php bloginfo(‘template_url’); ?>/images/headers/Ocean.png” />

    </div>
    [/code]

    my image directory is correct, but no images are showing up (except the default WP header image attached to this template). What am I doing wrong and how can I fix?

  • The topic ‘help with rotating header’ is closed to new replies.