Wordpress Themes - WP Forum at BFA
Click Here To DONATE! Support the theme development, get more attention and additional benefits based on your donation level. Your forum name will be highlighted.

Wordpress Themes - WP Forum at BFA » WordPress Themes » Atahualpa 3 Wordpress theme » Header configuration & styling »

HOWTO: create fading header images


Build custom WP THEMES, without
coding.
Click here for THEMEFRAME

From the author of Atahualpa, the #1 most
downloaded (700,000+) theme @ wordpress.org
  #1  
Old Apr 29, 2010, 08:33 AM
juggledad's Avatar
juggledad
 
22,314 posts · Mar 2009
OSX 10.8.5 WP 3.8.x Atahualpa 3.7.x Safari 6.x Firefox 25 XP
[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;
to
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.
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support

Last edited by juggledad; Oct 12, 2010 at 06:28 PM.
  #2  
Old May 11, 2010, 09:41 AM
Ata-Sonic's Avatar
Ata-Sonic
 
48 posts · May 2010
Lexington, KY USA
Awesome!

You're right... it does look FANTASTIC.
  #3  
Old May 14, 2010, 05:54 PM
marcelo
 
12 posts · Dec 2009
Thank you, Juggledad!!
  #4  
Old May 17, 2010, 12:05 PM
Keikurono's Avatar
Keikurono
 
24 posts · Dec 2009
Colombia
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.
  #5  
Old May 17, 2010, 12:29 PM
lmilesw's Avatar
lmilesw
 
10,107 posts · Jul 2009
Central New York State USA
Just tested and it works fine.
__________________
~Larry (CNY Web Designs)
This site should be a membership site since it so full of good stuff.
Please consider donating which gives you access to even more good stuff.
  #6  
Old May 17, 2010, 12:41 PM
Keikurono's Avatar
Keikurono
 
24 posts · Dec 2009
Colombia
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.
  #7  
Old May 17, 2010, 01:23 PM
lmilesw's Avatar
lmilesw
 
10,107 posts · Jul 2009
Central New York State USA
Mine are set to align top center as well. What is the URL for your site?
__________________
~Larry (CNY Web Designs)
This site should be a membership site since it so full of good stuff.
Please consider donating which gives you access to even more good stuff.
  #8  
Old May 17, 2010, 01:56 PM
Keikurono's Avatar
Keikurono
 
24 posts · Dec 2009
Colombia
here it is http://www.shito-anime.net/

thanks for your help
  #9  
Old May 17, 2010, 02:08 PM
lmilesw's Avatar
lmilesw
 
10,107 posts · Jul 2009
Central New York State USA
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.
__________________
~Larry (CNY Web Designs)
This site should be a membership site since it so full of good stuff.
Please consider donating which gives you access to even more good stuff.
  #10  
Old May 17, 2010, 02:42 PM
Keikurono's Avatar
Keikurono
 
24 posts · Dec 2009
Colombia
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..
  #11  
Old May 17, 2010, 03:47 PM
lmilesw's Avatar
lmilesw
 
10,107 posts · Jul 2009
Central New York State USA
I see what you mean. Could you try something? What happens if you use other alignment choices like "Top Left", "Center Center" etc?
__________________
~Larry (CNY Web Designs)
This site should be a membership site since it so full of good stuff.
Please consider donating which gives you access to even more good stuff.
  #12  
Old May 17, 2010, 05:13 PM
Keikurono's Avatar
Keikurono
 
24 posts · Dec 2009
Colombia
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.
  #13  
Old May 19, 2010, 11:09 PM
JonHorton
 
9 posts · Mar 2010
Austin, TX
Sorry I can't help. I really liked your tags animation. How did you get that functionality?
  #14  
Old May 22, 2010, 12:46 PM
Keikurono's Avatar
Keikurono
 
24 posts · Dec 2009
Colombia
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/)
  #15  
Old May 27, 2010, 02:26 PM
mook
 
7 posts · May 2010
Seems to not work in IE, unfortunately.
  #16  
Old May 27, 2010, 02:30 PM
lmilesw's Avatar
lmilesw
 
10,107 posts · Jul 2009
Central New York State USA
The new Fading Header in Atahualpa 3.5.0 and 3.5.1 works in Firefox, IE8, Opera, Safari, and Chrome
__________________
~Larry (CNY Web Designs)
This site should be a membership site since it so full of good stuff.
Please consider donating which gives you access to even more good stuff.
  #17  
Old May 27, 2010, 04:00 PM
mook
 
7 posts · May 2010
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/
  #18  
Old May 27, 2010, 04:02 PM
mook
 
7 posts · May 2010
Also, since I updated my site slogan seems to be getting hidden in Firefox/Chrome, but is visible in IE.
  #19  
Old May 27, 2010, 04:31 PM
lmilesw's Avatar
lmilesw
 
10,107 posts · Jul 2009
Central New York State USA
It's working fine for me in all browsers.
__________________
~Larry (CNY Web Designs)
This site should be a membership site since it so full of good stuff.
Please consider donating which gives you access to even more good stuff.
  #20  
Old May 27, 2010, 04:48 PM
mook
 
7 posts · May 2010
Odd. I just checked on another pc and it's working fine there too. *shrug*
  #21  
Old Jun 3, 2010, 03:36 PM
LadyPzaz
 
15 posts · Dec 2009
Hudson, Florida
Send a message via Yahoo to LadyPzaz
Quote:
Originally Posted by lmilesw
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....
  #22  
Old Jun 3, 2010, 03:44 PM
juggledad's Avatar
juggledad
 
22,314 posts · Mar 2009
OSX 10.8.5 WP 3.8.x Atahualpa 3.7.x Safari 6.x Firefox 25 XP
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.
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #23  
Old Jun 3, 2010, 03:57 PM
LadyPzaz
 
15 posts · Dec 2009
Hudson, Florida
Send a message via Yahoo to LadyPzaz
Well, I used the code from above and still no joy....
  #24  
Old Jun 3, 2010, 04:10 PM
LadyPzaz
 
15 posts · Dec 2009
Hudson, Florida
Send a message via Yahoo to LadyPzaz
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....
  #25  
Old Jul 7, 2010, 10:43 AM
RSY
 
2 posts · Jul 2010
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.

Bookmarks

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes


Similar Threads
Thread Thread Starter Forum Replies Last Post
HOWTO: put your image in the header juggledad Header 71 Jan 12, 2011 02:42 PM
[SOLVED] Fading header images mc38 Header configuration & styling 41 Apr 29, 2010 08:34 AM
HOWTO: have TWO background images on page Stingraynut Atahualpa 3 Wordpress theme 0 Apr 5, 2010 08:16 PM


All times are GMT -6. The time now is 02:40 AM.


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