Wordpress Themes - WP Forum at BFA - HOWTO: create fading header images

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)

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) 

            return; 

                imageContainer = jQuery('#imagecontainer');

        imageContainer.css("background","none"); 

        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>");

        }

        jQuery("#himage"+j).fadeIn(fadeInSpeed);

        SmoothRotateHeaderImages();

    }

}



function SmoothRotateHeaderImages() {

    fadeOutImage=jQuery("#himage"+j);

    j+=1; if(j>(HeaderImages.length-1)) j=0;

    fadeInImage=jQuery("#himage"+j);

    fadeInImage.fadeIn(fadeInSpeed);

    fadeOutImage.fadeOut(fadeOutSpeed);

    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.

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*

Quote:

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:

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.