[SOLVED] Fading header images
 

[Moderator note: I'm closing this thread - the explaination has been moved to 'HOWTO: create fading header images ' (http://forum.bytesforall.com/showthread.php?t=6921)]


Want to cross-fade (gentle fade in/out) the multiple header images instead of the harsh image rotation.
Has anyone done this? Alternatively could create a flash header myself, but then where would I place it? Thanks for any clues...

see http://forum.bytesforall.com/showthread.php?t=1197

thanks for that - nearly have it working but I do not know where / how to do this as suggested:
add css...
#sbsl6_1 {
width: 100%;
}

I tried adding it in the css inserts section of the theme options, but no effect. Here is the site so far...
www.danielcohan.com

you can see that the fading image is working fine, but site at the top of the page instead of where the original header is/was... I think this is the same problem you were having?
any help appeciated ...

if you look in the generated code you have
so you want to use sbsl1_1

So exactly in what file and where in this file should i place what code to get a smooth transition with the header images? (Without using NextGen gallery)

Is anyone familiar to the library code jQuery and the extension InnerFade (jQuery InnerFade) If so, would it be possible to create a new script for the imageheader so that the pictures shown are faded. (I am not a programmer my self, but got a tip from a friend that is)

I love this clean and neutral yet nice and powerful theme for Wordpress and would appreciate faded images in the header. I would donate if i knew this will be in the very near future version of this theme, or as an "hack/tweak"

Hello!
I just implemented a jquery solution.

You can download a few lines of code from http://jlkonsultab.se/files/smoothfading.txt

Paste the block of code into .../atahualpa/js.php (see file above for details).
Don't forget to comment out the original "window.onload ..." line

Disclaimer: I'm no jQuery expert so there may be better ways to implement it... anyway it works in Firefox!

best regards Johan

johanl - nice find it looks very nice!
to expand on the explanation edit js.php and change line 61 (in version 3.4.4) from
to

Awsome, thank you so much! I just added this code and it looks great!
As soon as my customer pays me, there will be a donation coming your way :)
Thanks again!
(you can see it in action at kopiko.ca)

this works, very easy fix for a knob like me

it seems to have changed what sections of the images are shown. I was showing "bottom centre" before and now it looks like it is showing top centre. I changed the alignment (to center etc) and got no results. Help!

how do I subscribe to this or any forum feed. Am i blind? CAn't seen to find it

I've just started to customize Atahualpa and spent hours trying to get the Frontpage slideshow to work so I'm glad I came across this post because this is suggestion is a life saver. I'm following the suggestions listed above for adding the slide show and so far have done the following:

1. Created my header images at 1300 x 232. The default image width was 1300 and I raised the height to 232.
2. I've created my gallery, id=1 and added the code to the "header.php" file.
3. I've modified the "js.php" and the slide show appears in the header.
4. I've adjusted the transition to "slowfade" and all looks well, so far.

The problem I'm having is that my image is waaay to big but I see where juggledad left his at 1440 but I'm not sure where to insert this code:

#sbsl6_1 {
width: 100%;
}

1. I tried placing it at the end of the style.css file but nothing happened. At this point the images are sitting on top of the menu which I guess wouldn't be a problem if it wasn't so large. I feel like I'm missing something obvious so please bear with me as I stumble through this final part. Am I right in assuming this will force the image to "honor" the CSS settings? Or do I need to edit something inside of the template settings?

2. I need to remove the default rotating image. I don't think I saw in the suggestion where this was done. It's late and I'm probably overlooking something simple.

3. Also would anyone happen to know how to keep the JW Player icon from appearing in the slideshow?

Any responses appreciated.

the css goes in ATO->Add HTML/CSS Inserts->CSS Inserts

hmph! Nothing changed. Maybe my images are just too wide and tall? 1300 x 232?

Thanks for the reply

what version of Atahualpa and WP?
What is the url?

ATA ver3.4.5 and here's the link to my demo site:

http://www.nusolutions.biz/demos/nubody/d2/

I've got the gallery sitting on top of the menu per the instructions and haven't figured out how to adjust or move it to the header section.

Any responses appreciated.

when I view the site, the menu is on top of the images...are you all set now?

Hi

New to WP and ATA as I am trying to get to grips with both, and found this forum really useful so far, so thanks for that

so I added to code for rounded corners for the header image in CSS Inserts which worked fine, but now I have added JS for for the fading rotation the corners are no longer rounded

Anyone have any ideas why and how to resolve it
Thanks in advance
Mark

OK have done a bit more digging if you set the the rotation to 0 in the Header Image Options or only have one image in the header folder the image is shown as rounded which is logical as I guess the fade JS is not being used
Also have noticed that the header image seems to be on top of the container rather than within it thus showing the corners.

Not sure if this is relevant but it seems like the JS to fade is causing the image to sit above the container defined in the CSS. Bit of guess work really as no expert in JS or CSS

Anyone?

This is stumping me at the moment as well would be great if someone manages to figure this one out.

I have tried several things but they have not worked the images are being places infront of the header container so the rounded corners do not function. They are there on the original container but the new header images just float over the container.

Regards

Nigel

fading header images....this is probably a question that will have the pros rolling their eyes. Want to insert the code but where is
window.onload = RotateHeaderImages;
// Smooth fading code starts here

well the 'window.onload = RotateHeaderImages;' is in js.php

Juggledad

Managed to get all that bit working fine and it looks great, however I am struggling to integrate the rounded corners now that I have that running it seems the new fading image is sitting above the old image container that has the rounded corners.

Any ideas?

Regards

Nigel

well, I edited the js.php file but no fading images. Looks just the same. What did I leave out? and I just donated,and will again when this is solved. thanks

Did you delete or comment out line 61 [window.onload = RotateHeaderImages;] from the js.php?

yes, I did.

Please attach your js.php to a post so I can take a look

<?php
global $bfa_ata; if ($bfa_ata == "") include_once (TEMPLATEPATH . '/functions/bfa_get_options.php');
if ( $bfa_ata_preview == 1 OR $bfa_ata['javascript_external'] == "Inline" OR
( $bfa_ata_debug == 1 AND $bfa_ata['allow_debug'] == "Yes" ) ) {
echo '<script type="text/javascript">';
} else {
header("Content-type: application/x-javascript");
}
if ( $bfa_ata['javascript_compress'] == "Yes" AND
!( $bfa_ata_debug == 1 AND $bfa_ata['allow_debug'] == "Yes" ) ) {
ob_start("bfa_compress_js");
}

function bfa_compress_js($buffer) {
/* remove comments */
$buffer = preg_replace('!/\*[^*]*\*+([^/][^*]*\*+)*/!', '', $buffer);
/* remove tabs, spaces, newlines, etc. */
$buffer = str_replace(array("\r\n", "\r", "\n", "\t", " ", " ", " "), '', $buffer);
$buffer = str_replace(array(": ", " :"), ":", $buffer);
$buffer = str_replace(array(" {", "{ "), "{", $buffer);
$buffer = str_replace(array(" }", "} "), "}", $buffer);
$buffer = str_replace(array(" (", "( "), "(", $buffer);
$buffer = str_replace(array(" )", ") "), ")", $buffer);
$buffer = str_replace(array(", ", " ,"), ",", $buffer);
$buffer = str_replace(array("; ", " ;"), ";", $buffer);
$buffer = str_replace(array("= ", " ="), "=", $buffer);
return $buffer;
}


# if (function_exists('sociable_html')) {
# include (WP_PLUGIN_DIR.'/sociable/wists.js');
# }

?>

//<![CDATA[

<?php if (strpos($bfa_ata['configure_header'],'%image')!==FALSE AND
$bfa_ata['header_image_javascript'] != "0" ) { ?>

var HeaderImages = new Array(<?php echo implode(",", bfa_rotating_header_images()); ?>);
var t; var j = 0
var p = HeaderImages.length
<?php if ($bfa_ata['header_image_javascript_preload'] == "Yes") { ?>
var PreLoadImages = new Array()
for (i = 0; i < p; i++){
PreLoadImages[i] = new Image()
PreLoadImages[i].src = HeaderImages[i]
}
<?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)
}
}// 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:abso lute;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

<?php } ?>


/* JQUERY */

jQuery(document).ready(function(){

/* For IE6 */
if (jQuery.browser.msie && /MSIE 6\.0/i.test(window.navigator.userAgent) && !/MSIE 7\.0/i.test(window.navigator.userAgent) && !/MSIE 8\.0/i.test(window.navigator.userAgent)) {

/* Max-width for images in IE6 */
var centerwidth = jQuery("td#middle").width();

/* Images without caption */
jQuery(".post img").each(function() {
var maxwidth = centerwidth - 10 + 'px';
var imgwidth = jQuery(this).width();
var imgheight = jQuery(this).height();
var newimgheight = (centerwidth / imgwidth * imgheight) + 'px';
if (imgwidth > centerwidth) {
jQuery(this).css({width: maxwidth});
jQuery(this).css({height: newimgheight});
}
});

/* Images with caption */
jQuery("div.wp-caption").each(function() {
var captionwidth = jQuery(this).width();
var maxcaptionwidth = centerwidth + 'px';
var captionheight = jQuery(this).height();
var captionimgwidth = jQuery("div.wp-caption img").width();
var captionimgheight = jQuery("div.wp-caption img").height();
if (captionwidth > centerwidth) {
jQuery(this).css({width: maxcaptionwidth});
var newcaptionheight = (centerwidth / captionwidth * captionheight) + 'px';
var newcaptionimgheight = (centerwidth / captionimgwidth * captionimgheight) + 'px';
jQuery(this).css({height: newcaptionheight});
jQuery("div.wp-caption img").css({height: newcaptionimgheight});
}
});

/* sfhover for LI:HOVER support in IE6: */
jQuery("ul li").
hover( function() {
jQuery(this).addClass("sfhover")
},
function() {
jQuery(this).removeClass("sfhover")
}
);

/* End IE6 */
}

<?php if ($bfa_ata['table_hover_rows'] == "Yes") { ?>
jQuery(".post table tr").
mouseover(function() {
jQuery(this).addClass("over");
}).
mouseout(function() {
jQuery(this).removeClass("over");
});
<?php } else { ?>
jQuery(".post table.hover tr").
mouseover(function() {
jQuery(this).addClass("over");
}).
mouseout(function() {
jQuery(this).removeClass("over");
});
<?php } ?>


<?php if ($bfa_ata['table_zebra_stripes'] == "Yes") { ?>
jQuery(".post table tr:even").
addClass("alt");
<?php } else { ?>
jQuery(".post table.zebra tr:even").
addClass("alt");
<?php } ?>


<?php if ($bfa_ata['highlight_forms'] == "Yes") { ?>
jQuery("input.text, input.TextField, input.file, input.password, textarea").
focus(function () {
jQuery(this).addClass("highlight");
}).
blur(function () {
jQuery(this).removeClass("highlight");
})
<?php } ?>

jQuery("input.inputblur").
focus(function () {
jQuery(this).addClass("inputfocus");
}).
blur(function () {
jQuery(this).removeClass("inputfocus");
})


<?php if (function_exists('lmbbox_comment_quicktags_display ')) { ?>
jQuery("input.ed_button").
mouseover(function() {
jQuery(this).addClass("ed_button_hover");
}).
mouseout(function() {
jQuery(this).removeClass("ed_button_hover");
});
<?php } ?>


jQuery("input.button, input.Button").
mouseover(function() {
jQuery(this).addClass("buttonhover");
}).
mouseout(function() {
jQuery(this).removeClass("buttonhover");
});

/* toggle "you can use these xhtml tags" */
jQuery("a.xhtmltags").
click(function(){
jQuery("div.xhtml-tags").slideToggle(300);
});

/* For the Tabbed Widgets plugin: */
jQuery("ul.tw-nav-list").
addClass("clearfix");


<?php if ( $bfa_ata['sticky_layout_footer'] == "Yes" ) { ?>
/* Strech short pages to full height, keep footer at bottom. */

/* Set a compensation value to fix browser differences and an overall
misalignment with this method */
if (jQuery.browser.msie || jQuery.browser.safari) {
var bfacompensate = 41;
} else {
var bfacompensate = 21;
}

/* Fix a jQuery/Opera 9.5+ bug with determining the window height */
var windowheight = jQuery.browser.opera && jQuery.browser.version > "9.5" &&
jQuery.fn.jquery <= "1.2.6" ? document.documentElement["clientHeight"] : jQuery(window).height();

/* Top and bottom padding may have been set on the BODY */
var paddingtop = parseInt(jQuery("body").css("padding-top"));
var paddingbottom = parseInt(jQuery("body").css("padding-bottom"));

/* Get the height of the header, footer, and the layout as a whole */
var headerheight = jQuery("td#header").height();
var footerheight = jQuery("td#footer").height();
var layoutheight = jQuery("div#wrapper").height();

/* Adjust height of middle column if (layout height + body padding-top + body padding-bottom) is smaller than
height of browser viewport */
if ( windowheight > (layoutheight + paddingtop + paddingbottom) ) {
var newmiddleheight = windowheight - paddingtop - headerheight - footerheight - paddingbottom - bfacompensate;
jQuery("td#middle").css({height: newmiddleheight + "px"});
}
<?php } ?>

});

//]]>
<?php

#if ( function_exists('wp_list_comments') AND $bfa_ata['include_wp_comment_reply_js'] == "Yes" )
# include (ABSPATH . '/wp-includes/js/comment-reply.js');

if ( $bfa_ata['javascript_compress'] == "Yes" AND
!( $bfa_ata_debug == 1 AND $bfa_ata['allow_debug'] == "Yes" ) ) {
ob_end_flush();
}
if ( $bfa_ata_preview == 1 OR $bfa_ata['javascript_external'] == "Inline" OR
( $bfa_ata_debug == 1 AND $bfa_ata['allow_debug'] == "Yes" ) ) {
echo "</script>\n";
}
?>

put a carriage return between } and // and save

Think that is the problem

No forget that it's not the problem

PM me your email address and I will send toy my js.php then if it still doesn't work the problem is elsewhere

Mark, good idea, but I just tryed that and it didn't cause mine to fail...

Still worked for me too, I think he may have a problem elsewhere, i compared his js.php to mine and is the same, but if he tries mine will prove it

Now If i could just get to the bottom of the great rounded corners saga I would be happy :)

Scrub that, is definitely a problem with PortMaria.62 js.php. (well what was pasted here)

I used it and it also put a 2nd header below the first and rotated images between the 2. quite trippy

PortMaria.62 is always best to wrap code in the code tags when posting on forums, as the forum code can do strange things to it

As said before PM me your email and i wil send you my js.php to try

:)

Well here is the problem. She had ATO->Header Image->Rotate header images with Javascript? set to '0'. Since it was set to '0' the rotating java code is not created.

thank you juggledad. I think we can close this one.

Would somebody mind summing this up? Is there something beyond editing the js.php file that needs doing? I did that to no effect. Much appreciated.

Wow... This is very cool. Where would I add in js.php to center my images. Right now everything is float left. Here's the unfinished site: http://blog.privatelabelfitness.com/

Once i get this figured out... my donation will follow... actually it will follow anyway since this is an incredibly helpful forum.

Art

arothafel - your header area is centered, it might look off because some of your images are not the same width as the others. Save the images as the same width

Thank you Juggledad

You're correct... as usual.. Stupid me! Thanks for the help. Donation has been forwarded with more to come, no doubt. :)

Ok everyone. I have a client now too that wants faded rotating header images. I just read this entire thread. I have not started the process yet, but I have to chime in to say the simplest way to give the image rounded corners is to bring them into photoshop and round them. Match the background colors. Then you don't need to use any rounded corner functions. The images themselves have round corners.

(ok you will likely here from me as I start this process and run into a million problems) :)

Emanuel

Ok I ran into my first issue. (LOL that was fast). Basically, NextGen uses JW Image Rotator, and this company recently stuck a watermark on their rotator that you have pay $59 euros to remove! Gimme a break!