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 |
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?
|
|
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:
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. |
All times are GMT -6. The time now is 05:04 AM. |
Powered by vBulletin® Copyright ©2000 - 2024, Jelsoft Enterprises Ltd.