Wordpress Themes - WP Forum at BFA
Click here to register or to donate.
Auto self-registration is not available here - far too many spammers. This forum has many, many backlinks and because of that there is an intense desire among spammers to drop their links here.

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

HOWTO: create fading header images


  #1  
Old Apr 29, 2010, 07:33 AM
juggledad's Avatar
juggledad
 
23,762 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
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;
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 05:28 PM.
  #2  
Old May 11, 2010, 08: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, 04:54 PM
marcelo
 
12 posts · Dec 2009
Thank you, Juggledad!!
  #4  
Old May 17, 2010, 11:05 AM
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, 11:29 AM
lmilesw's Avatar
lmilesw
 
10,176 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, 11:41 AM
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, 12:23 PM
lmilesw's Avatar
lmilesw
 
10,176 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, 12: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 Sep 22, 2010, 06:43 AM
aravere's Avatar
aravere
 
56 posts · Sep 2010
rural Virginia, US
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!
  #10  
Old Sep 22, 2010, 06:56 AM
juggledad's Avatar
juggledad
 
23,762 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
ATO = Atahualpa Theme Options
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #11  
Old Oct 12, 2010, 07:55 PM
sohel2020
 
23 posts · Sep 2010
I try but it was not work.
i am using atahualpa345.

here is my js.phpjs.txt

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.
  #12  
Old Oct 15, 2010, 07:56 PM
Lonz's Avatar
Lonz
 
5 posts · Oct 2010
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 */


Last edited by Lonz; Oct 15, 2010 at 08:01 PM.
  #13  
Old Oct 16, 2010, 06:39 AM
juggledad's Avatar
juggledad
 
23,762 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
have you turned off the rotating image option at ato->Header Image->Rotate header images with Javascript?
__________________
"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; Nov 24, 2010 at 05:20 AM.
  #14  
Old Nov 24, 2010, 05:10 AM
doubleclic
 
3 posts · Nov 2010
Hi,

Thanks for this great code - it works great for me with IE8 but with one small problem - every time it changes to a new image in the rotation it stretches the image height by a few mm and then before the image changes it un-stretches it again - giving an annoying little jumping effect. I have tried changing the header image height setting down and up in ATO but it makes no difference - do you have any suggestions?

Thanks.
  #15  
Old Nov 24, 2010, 05:21 AM
juggledad's Avatar
juggledad
 
23,762 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
are you using the fading in/out or just the rotation - what is the url?
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support

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 01:42 PM
[SOLVED] Fading header images mc38 Header configuration & styling 41 Apr 29, 2010 07:34 AM
HOWTO: have TWO background images on page Stingraynut Atahualpa 3 Wordpress theme 0 Apr 5, 2010 07:16 PM


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


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