[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!

Hi, this sounds great. Would you be able to add the coding to show different header images with different pages?

I have upgraded to the newest version to try out this new rotating header. Looks great. 2 issues I've run into, #1 It appears to only work (ie rotate continuously) in IE, I use firefox and it does not rotate when viewing in there.

#2 is there a way to specify in which order the images come up? I would like to be able to specify the order of the 3 images I've placed in the folder. I currently have them named 1,2 & 3 but it appears that they are being pulled at random.

Thanks!

First off, remember this code is now built into Atahualpa 3.3.3

Tarzanna77
#1 make sure you have javascript enabled in Firefox
#2 The code is just a simple loop. It loads the images into an array and then displays them in the order they are in the array. It might be possible that they are being loaded into the array in a strange order, but that would be a javascript issue and I didn't write the code, just lifted it and got it working to rotate the images.

judyksp
I assume you mean, one set of images for one page and naother set of images for another page. It might be possible to do that, (I think I've seen posts where people want a different header on different pages) but that's not what I was trying to do.

If you figure out how to impliment that ability, please let us all know. I'd like to try it myself.

and don't forget to give Flynn a donation

Thanks juggledad, Just to clarify, I'm not trying to use the code you were working with, I'm am using the built-in functionality of the 3.3.3 theme.

I've looked at my Firefox settings and both Enable Java & Enable Javascript are checked. Not sure why it's not rotating. Works beautifully in IE. Sucha neat built-feature. I'd love to be able to use it.

In case it matters, I am using a different page template for my home page to be able to have the 4 columns below with photos, however, the rotating doesn't happen on ANY pages.

I notice the jpgs have a space in the names 'Toni Header2.jpg' try changing the space to an underscore so the name would be Toni_Header2.jpg. Spaces can do some odd things.

That was it! Thank you! Such a simple little fix. :o

hi
this is amazing but i would like to know if it possible to cross dissolve image when sliding...

If you look thru the header Configuration & styling, there is a post I put in about using a NextGen slideshow which has dissolving. I got it to work and would have used that, but I wanted the top corners to be rounded and haven't yet figured out how to do it with Nextgen

see: http://forum.bytesforall.com/showthread.php?t=1197

Good Morning!

I'm using 3.3.3 on WP 2.7.1 and I have a 'small' little issue I cannot seem to find the answer for. I'm sure it's me...

I have 16 jpg's that rotate fine for what appears to be 1 "cycle" after which no image shows. Refresh and things are fine again for another cycle.

Is this normal? Thank you so much for your wonderful work.

Russ

Hmmm, Haven't seen that. What's your url? can you install the WP Security Scan plugin (http://semperfiwebdesign.com/custom-...y-scan/#more-9) and then copy and paste the information in the System Information Scan.

I'm having the opposite problem - header doesn't rotate in IE8, but works fine in Firefox. All the Add-Ons under Sun Microsystems are enabled. Is anyone else experiencing this?

do you have java turned on in IE8?

I guess I don't understand the question. I thought I had pre-answered with: All the IE8 Add-Ons under Sun Microsystems are enabled.
If there is any other way to "turn on" java it's unknown to me.
I looked some more and find that I am using my current virtual machine for java.
Know of something else?

Sorry, I issed that. I've got an instance of IE8 running and the image is rotating. can you post the url so I can take a look on my IE8?

the problem is caused by something that generates the following code
When I remove that code, the image starts rotating in IE8

Also, there is a funny bit of CSS that is in the code
Have you made any changes to the code? does this 'style1 ring a bell?

I would guess, since it refers to text in the right sidebar, that "the funny bit of CSS" has to do with the WordPress widget called "Text" that allows you to write in the sidebar.
I'm not sure where I should be looking for this code - index.php?
I assume you're recommending the removal of the GBCF stuff, and that it is in header.php. So, I'll go looking for it and try to see if anything disappears along with it.
It sounds vaguely like it might have something to do with the "Secure and Accessible PHP Contact Form" plugin I installed, but can't imagine what that would be doing in the header.
Thanks.

look in the dashbaord->appearance->widgets Right Widgets, text and see what you put there.

Umm, I didn't say anything about header.php, I got this info from looking at the generated source of the web page. This code is probably created by one of the plugins you are using. Try deactivating them all and see if theheader image starts rotating. If it does, add a couple back till it stops rotating. You should be able to find the plugin that is causing the issue this way.

Yes, context is everything. I had spent the earlier part of my day mucking around in the header.php file trying to make the resize instructions from "Automatic resizing of the header image" work.
http://forum.bytesforall.com/showthread.php?t=301
Although it might should be the subject of another thread, I concluded that unless I could string together five different URLs in the above instructions, there is no way to have header resizing and rotating headers at the same time.

Getting back to the original subject with another tangent, it didn't occur to me that you were referring to the source page file because you talked about removing a section of it to test what happened. HOW THE HECK DO YOU DO THAT TRICK? Dinner's on me at the nearest Burger King just for that tutorial.

Yes, it is the "Secure and Accessible PHP Contact Form" plugin that is causing the non-rotation problem. My options include living with no rotation in IE8, or convincing you guys or the plugin developers to find a fix. Alternatively, can you recommend an email contact plugin that will work?

As for the text I included in the right sidebar, it is "Site Search". I also just remembered that "Style 1" is terminology that Dreamweaver uses, and that there is some Style 1 text in the footer - the two links that I added.

here is something to try, edit wp-gbcf_focus.js, at the bottom you will find
change 'i' to 'ii' and 'j' to 'jj' so you have
both java scripts are using 'i' and 'j as variables and I'll bet they are messing each other up.

Nope - as soon as I re-activate the plugin, rotation stops.

I downloaded and installed a new email contact form - problem solved. Any reason to go back and edit out the extra "i"s and "j"s? I assume they won't affect anything/

Since they are part of the code in "Secure and Accessible PHP Contact Form" and your not using it, no need to change it back, but you might want remove the plugin from the plugin folder

I am not able to get the header image to rotate in any browser. I've verified that Java is enabled in both IE8 and Firefox, renamed images to remove spaces, and looked for conflicting plugins, to no avail. Any ideas? My site is http://www.tarheelramblings.com. Oh, and I'm on version 3.4 of Atahualpa. :D

Please swap back to 3.3.3 and wait till after Friday when Flynn gets back. There seems to be a 'glitch' with 3.4

It's also missing in 3.4.1 which fixed many other bugs. On Sunday 7-12-2009 I'll release 3.4.2, or you can edit js.php of 3.4.1 and add this:


after this

URGENT!!!!!!!
dear i have by mistake i have upload the above stated code in theme editor/header.php/rotating image.php
my site got currupted.. i cannot access my site . dat is narinderafurnitures.com
please suggest me the solution to come out of the problem,its damn urgent...

it got dropped in 3.4.0 and 3.4.1 but back in 3.4.2 see xhttp://forum.bytesforall.com/showthread.php?p=9964 if you want to fix one of those two versions - better yet, move to 3.4.2

I am having the same problem. I cannot get the header images to rotate at all, in any browser.

www.tibetanbuddhistaltar.org

I am also using Atahualpa 3.4.1

?

it got dropped in 3.4 (and 3.4.1) but is back in the 3.4.2 version

Also does not work using Atahualpa 3.4.2, WP 2.7.1, with Firefox 3.5. I put an extra set of qoutes around the background styling of js.php changing:

function RotateHeaderImages(){
if (document.body){
HeaderImageContainer = document.getElementById('imagecontainer');
HeaderImageContainer.style.background = 'url(' + HeaderImages[j] + ') <?php echo $bfa_ata['headerimage_alignment']; ?> no-repeat';
j = j + 1
if (j > (p-1)) j=0
t = setTimeout('RotateHeaderImages()', <?php echo $bfa_ata['header_image_javascript']; ?>000)
}
}

to this:

function RotateHeaderImages(){
if (document.body){
HeaderImageContainer = document.getElementById('imagecontainer');
HeaderImageContainer.style.background = 'url("' + HeaderImages[j] + '") <?php echo $bfa_ata['headerimage_alignment']; ?> no-repeat';
j = j + 1
if (j > (p-1)) j=0
t = setTimeout('RotateHeaderImages()', <?php echo $bfa_ata['header_image_javascript']; ?>000)
}
}

Now works using IE8, FF 3.5 (Win7 64 bit and Fedora 11), Opera 9.64, and Chrome 2.0.172.39.

I'm using 3.4.1
does that mean i'm not able to have my header image rotated in every 'N' seconds?
so sadddddddddddd >_<

i've just tried this and it WORKS like a charm! thanks you :)))))

Will this still work for the newest version you think?

The rotating header image code has been added into the theme. There is an option at ATO->Header Image called 'Rotate header images with Javascript?' that you can change from 0 to rotate the images.

Ach, yes offcause, Thx! :)

Works fine! thx again! I hope to finish soon so I can show off ;)

Thanks a lot juggledad, I had to try a few times, but I finally got it to work. I have to admit it looks great on my site. My only complaint would be that it slows things down about on my site. As soon as I added the javascript, my site also dropped somewhat on the organic Google listing. I think page-load time is a factor. So I decided to switch back. I WILL apply it to my personal blog though, where I don't give a squat about rankings.

I'm developing a new site, http://www.replaysportsmt.com/

I have 4 images loaded in the /header directory and all appear if the page is refreshed or you go to a new page. They are not rotating however. I have it set to rotate every 4 seconds using JavaScript fade effect.

Can you advise, please?

Thanks,

Tom