Wordpress Themes - WP Forum at BFA

Wordpress Themes - WP Forum at BFA (http://forum.bytesforall.com/index.php)
-   Header configuration & styling (http://forum.bytesforall.com/forumdisplay.php?f=15)
-   -   HOWTO: create fading header images (http://forum.bytesforall.com/showthread.php?t=6921)

juggledad Apr 29, 2010 07:33 AM

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
HTML Code:

window.onload = RotateHeaderImages;
HTML Code:

// Smooth fading code starts here
var fadeInSpeed=2500; // ms
var fadeOutSpeed=2000; // ms

function PrepareRotatingImages() {
        if (document.body){
        if(HeaderImages.length < 2)
                imageContainer = jQuery('#imagecontainer');
        for(i=0; i < HeaderImages.length; i++) {
            imageContainer.append("<div id=\"himage" + i + "\" style=\"overflow:hidden;display:none;position:absolute;top=0;left=0;width:100%;height:<?php echo $bfa_ata["headerimage_height"]?>
px\"><img src=\""+HeaderImages[i]+"\"/></div>");

function SmoothRotateHeaderImages() {
    j+=1; if(j>(HeaderImages.length-1)) j=0;
    t = setTimeout('SmoothRotateHeaderImages()', <?php echo $bfa_ata['header_image_javascript']; ?>000);

window.onload = PrepareRotatingImages;
// end smooth fading

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

Ata-Sonic May 11, 2010 08:41 AM


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

marcelo May 14, 2010 04:54 PM

Thank you, Juggledad!!

Keikurono May 17, 2010 11:05 AM

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..


lmilesw May 17, 2010 11:29 AM

Just tested and it works fine.

Keikurono May 17, 2010 11:41 AM

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.


lmilesw May 17, 2010 12:23 PM

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

Keikurono May 17, 2010 12:56 PM

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

thanks for your help

lmilesw May 17, 2010 01:08 PM

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.

Keikurono May 17, 2010 01:42 PM

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..

lmilesw May 17, 2010 02:47 PM

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

Keikurono May 17, 2010 04:13 PM

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.

JonHorton May 19, 2010 10:09 PM

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

Keikurono May 22, 2010 11:46 AM

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/)

mook May 27, 2010 01:26 PM

Seems to not work in IE, unfortunately.

lmilesw May 27, 2010 01:30 PM

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

mook May 27, 2010 03:00 PM

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:

mook May 27, 2010 03:02 PM

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

lmilesw May 27, 2010 03:31 PM

It's working fine for me in all browsers.

mook May 27, 2010 03:48 PM

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

LadyPzaz Jun 3, 2010 02:36 PM


Originally Posted by lmilesw (Post 32209)
I see what you mean. Could you try something? What happens if you use other alignment choices like "Top Left", "Center Center" etc?

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:

juggledad Jun 3, 2010 02:44 PM

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.

LadyPzaz Jun 3, 2010 02:57 PM

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

LadyPzaz Jun 3, 2010 03:10 PM

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....

RSY Jul 7, 2010 09:43 AM

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.

All times are GMT -6. The time now is 01:03 AM.

Powered by vBulletin® Copyright ©2000 - 2021, Jelsoft Enterprises Ltd.