HOWTO: create fading header images
 

[This comes from a tip by johanl from post http://forum.bytesforall.com/showthread.php?t=4046] - nice find it looks very nice!

If you would like to have a cross-fade (gentle fade in/out) the multiple header images instead of the harsh image rotation, edit js.php and change line 61 (in version 3.4.4-3.4.6) from
to
Make sure you have set ATO->Header Image->Rotate header images with Javascript? to a number greater than '0' or this will not work.

Awesome!

You're right... it does look FANTASTIC.

Thank you, Juggledad!!

hi, thanks for this, got a question.. does this works with version 3.4.9??

it only mentions 3.4.4 - 3.4.6, so i wonder..

thanks.

Just tested and it works fine.

Well, yes, just tested it and it works but i found a problem.

In my case i have the header images align at "top center". After changing the code to add the fade in/out the alignment changed.

After the first load of the page the header image it's aligned top center but when it does the first fade out and then the fade in to the next img the alignment is lost. I really like this feature so i would like to keep it, so my question is, how can i fix this so the alignment does get lost.

Thanks.

Mine are set to align top center as well. What is the URL for your site?

here it is http://www.shito-anime.net/

thanks for your help

It isn't the centering it is the image sizes. If you set your Layout Width in ATO>Style & configure LAYOUT to no more than 1220px and your height in to no more than 180px in ATO>Header Image you should be fine.

i can't change the layout, and the header images are set to fix the size of the layout when they are top centered. Check the site again, i turn it back to not fade in/out the headers, you'll see all of them centered as they should be (as i put them).

btw, the fade in/out doesn't make the header image clickeable..

I see what you mean. Could you try something? What happens if you use other alignment choices like "Top Left", "Center Center" etc?

I've just tryed that, did not work.. for what i see it keeps aligning the image to top-left.

Seems that in order to keep the images fading i have to edit the images. I'ts a shame i can't use the top-center alignment.

Sorry I can't help. I really liked your tags animation. How did you get that functionality?

Hi, don't worry about the headers, i changed it back to fixed ones.

The Tags animation I did it through a plugin call "WP-Cumulus" (http://wordpress.org/extend/plugins/wp-cumulus/)

Seems to not work in IE, unfortunately.

The new Fading Header in Atahualpa 3.5.0 and 3.5.1 works in Firefox, IE8, Opera, Safari, and Chrome

Hmm. It doesn't seem to be working in mine. I installed 3.5.1.

It does work in Chrome/FF.

Here's the site:
http://issfleetteam.com/

Also, since I updated my site slogan seems to be getting hidden in Firefox/Chrome, but is visible in IE.

It's working fine for me in all browsers.

Odd. I just checked on another pc and it's working fine there too. *shrug*

I'm having the same issue, I believe...upgraded to 3.5.1 and using WP 2.9.2. When I use Top Center or any other choice for that matter, the images, upon refresh of the page, come out centered but then the next image is all the way to the left and a little piece of the original image is still visible on the right side...what can I do to fix it?? I did take out all images that were not 1300x150 - should I switch to 1220??

Any help would be appreciated? Also, I do not see the tabs with sliding menus....:confused:

Are you using the code in this post or the new fading java option.

The new java fading option seems to have some issues (it's not this same code) and when the java code overlays the image it ignore the position, opacity and blog title overlay'.

For the time being if you want to have fading images, I suggest doing it the way this thread says and not use teh new theme option.

Well, I used the code from above and still no joy....:(

OK, now it works! I changed the first 3 settings to 5, 5, and Yes, respectively, and with Mafgirl's suggestion, changed the width of my site to 1300 and now they fade to different images!! No opaqueness but, hell, it works!

Now, to figure out the category/sliding menu thingy....

Hello,
Does anybody has problems running this code on Chrome?
It worked on FF and IE, but the header image remains static on chrome. Only the initial fading happens.

It was not working on one of my sites in Chrome. I deactivated a couple of plugins that had to do with images and now is working.

Wow, thx this works great! :)

Hi Jaggledad, has this been solved in 3.5.3?

no, there is still a problem in 3.5.3 with the new code doing fading headers. Release 3.5.2 and 3.5.3 were very minor changes

Thanks. Could one use the code mentioned at the beginning of this thread in 3.5.1? If so, which header image options should remain active/inactive? Thanks again!

try it and let us know

Yes the code works fine in 3.5.1. Option for header image rotation should be ON but fading should be OFF. One problem, however: rotaion is no longer random, regardless of the setting chosen in the options menu. Any way to get that onboard as well in this code? Thanks!


EDIT: after some observation, I noticed that, although the roation sequence repeats always in the same order, reloading the page changes the sequence to a different one. Everytime. I guess this is good as it gets, or?

There is a thread in the gold forums tutorials to allow you to set the rotation random or sequential

I'm brand-spankin' new to WP, and am excited about this Atahualpa's potential and forum support! Can you explain the following statement (not a clue where I set ATO):

"Make sure you have set ATO->Header Image->Rotate header images with Javascript? to a number greater than '0' or this will not work." [/quote]

Thanks!

ATO = Atahualpa Theme Options

I try but it was not work.
i am using atahualpa345.

here is my js.phpAttachment 803

plz see the code if any error plz edit it and mail me on

sohel2020@gmail.com

i also change ATO->Header Image->Rotate header images with Javascript?

give it value '3'

but still it do not work

please help me.

Hi I am new to all this and I put your fade in and out into the correct spot but I don't know how to find the ATO's version? Also it has changed the images to go only to the far left? I am also having trouble loading the correct size images into the header? I think they need to be 1300 x 600 but have spents weeks trying to work it out? Please help :)

Lonz - if you go to the dashboard->appearances->themes you will see the version of atahualpa displayed. This is built in as of 3.5.1 (I think) but it does have some issues.

Images can be what ever sire you want them to be. However, if you have set your page to be variable width and someone makes it wider than your image, then white space will show up.

I generally create variable width pages with a minimum width of 800 and a maximum of 1440 and then make my images 1440 by what ever header height I've defined

hi again
Thanks for that it is version 3.4.9
I fixed the fade in and out back to static and centre but now it just shows a different photo on each page?
this is the script as it is on my comp, could you let me know please what I need to put in to get it rotating again

<?php } ?>
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)
}

window.onload = RotateHeaderImages;

<?php } ?>


/* JQUERY */

:o:o

have you turned off the rotating image option at ato->Header Image->Rotate header images with Javascript?