[SOLVED] How to get a header image to rotate every 'N' seconds

Update: This got dropped in the 3.4 and 3.4.1 versions, but is back in 3.4.2

UPDATE: this is now included in Atahualpa 3.3.3, see
Atahulapa Theme Options -> Header Image -> Rotate Header images with Javascript
You will also have to back out the changes you made per this post

I really love the Atahualpa Theme and think Flynn has a real winner here. It amazes me to see how many differrent 'looks' we users have come up with. But...

I wanted one more thing. While I love the fact that the header image randomly changes on each page, I wanted to get the image to change while I was sitting on a page. So I took up the chalange and with a little help from Flynn, I did it! So here is method 1 - using an embedded Java script. (this was done on Wordpress 2.7.1 using Atahualpa 3.3.20

To use this method you will
1) customize a Java script
2) add the code to the theme (theme options -> HTML/CSS Inserts -> HTML Inserts: Header)
3) add a body tag (theme options -> HTML/CSS Inserts -> HTML Inserts: Body Tag)
4) edit bfa_header_config.php (a 1 line change)
5) sit back and enjoy

STEP 1 - customize a Java script
There are a couple things that have to be customized in the Java script: the time interval, the address of your blog, the location of your images and the names of your images. Copy the Java script below to a text editor.

Change the number of milliseconds to the interval youi want. Remember, 1000 milliseconds = 1 seconds.

Next, change the blog_address from 'http://mysite.org/wordpress/' to your blog address and change 'wp-content/themes/atahualpa332/images/header/' if your images are in another folder.

Then add the names of your images to the array. In the example the images are called 1.jpg, 2.jpg, 3.jpg and 4.jpg - if yours were blue.jpg, green.jpg, house.jpg and dog.jpg, those are the names you would use. Maybe someday I or someone else will figure a way to read the directory and automatically populate the array, but for now this is the way it must be done. You can add more images if you want.

+++++++++++++++++++++++++++++++++++
start of Java code snippet
+++++++++++++++++++++++++++++++++++++
<SCRIPT LANGUAGE="JavaScript">

<!-- This script and many more are available free online at -->
<!-- The JavaScript Source!! http://javascript.internet.com -->

<!-- Begin
// (C) 2001 www.CodeLifter.com
// http://www.codelifter.com
// Free for all users, but leave in this header

// =======================================
// set the following variables
// =======================================

// Set speed (milliseconds)
var speed = 10000
// Set your site address
blog_address = 'url(http://mysite.org/wordpress/'
// only change this if your images are somewhere else
rh_start = blog_address + 'wp-content/themes/atahualpa332/images/header/'
rh_end = ') no-repeat 50% 0%'

// Specify the image files
var Pic = new Array() // don't touch this
// to add more images, just continue
// the pattern, adding to the array below

Pic[0] = rh_start + '1.jpg' + rh_end
Pic[1] = rh_start + '2.jpg' + rh_end
Pic[2] = rh_start + '3.jpg' + rh_end
Pic[3] = rh_start + '4.jpg' + rh_end

// =======================================
// do not edit anything below this line
// =======================================

var t
var j = 0
var p = Pic.length

var preLoad = new Array()
for (i = 0; i < p; i++){
preLoad[i] = new Image()
preLoad[i].src = Pic[i]
}

function runBGSlideShow(){
if (document.body){
h_image = document.getElementById('imagecontainer');
h_image.style.background = Pic[j];
j = j + 1
if (j > (p-1)) j=0
t = setTimeout('runBGSlideShow()', speed)
}
}
// End -->
</script>
+++++++++++++++++++++++++++++++++++++
end of Java code snippet
+++++++++++++++++++++++++++++++++++++

STEP 2 - add the code to the theme
Copy the code and paste it into 'HTML Inserts: Header' and save the changes.
(Atahualpa theme options -> HTML/CSS Inserts -> HTML Inserts: Header)

STEP 3 - add a body tag
Copy the following line:

onload="runBGSlideShow()"

Add it to the 'HTML Inserts: Body Tag' and save the changes
(Atahualpa theme options -> HTML/CSS Inserts -> HTML Inserts: Body Tag)

Step - 4 edit bfa_header_config.php
First you will have to get a copy of the file bfa_header_config.php (which is located in wp-content/themes/atahualpa332/functions). Edit this file and locate teh line (about line 190 in the code)

$header_image = '<div class="header-image-container" style="background: url(' . $selected_header_image . ') ' .

and replace it with

$header_image = '<div id="imagecontainer" class="header-image-container" style="background: url(' . $selected_header_image . ') ' .

Now save the file and upload it back to the server.

STEP 5 - sit back and enjoy

go visit your site and enjoy watching the headers change and while your at it, send Flynn a donation!