Wordpress Themes - WP Forum at BFA
There will be no more development for Atahualpa (or any other theme), and no support. Also no new registrations. I turned off the donation system. I may turn the forum to read only if it gets abused for spam. Unfortunately I have no time for the forum or the themes. Thanks a lot to the people who helped in all these years, especially Larry and of course: Paul. Take care and stay healthy -- Flynn, Atahualpa developer, Sep 2021

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

[SOLVED] Fading header images


  #26  
Old Feb 5, 2010, 07:29 AM
PortMaria.62's Avatar
PortMaria.62
 
19 posts · Dec 2009
wyoming
yes, I did.
  #27  
Old Feb 6, 2010, 05:50 AM
juggledad's Avatar
juggledad
 
23,765 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
Please attach your js.php to a post so I can take a look
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #28  
Old Feb 6, 2010, 09:24 AM
PortMaria.62's Avatar
PortMaria.62
 
19 posts · Dec 2009
wyoming
<?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";
}
?>
  #29  
Old Feb 6, 2010, 01:12 PM
Mark_
 
29 posts · Feb 2010
Code:
}// Smooth fading code starts here
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

Last edited by Mark_; Feb 6, 2010 at 01:24 PM.
  #30  
Old Feb 6, 2010, 01:28 PM
juggledad's Avatar
juggledad
 
23,765 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
Mark, good idea, but I just tryed that and it didn't cause mine to fail...
__________________
"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; Feb 6, 2010 at 01:34 PM.
  #31  
Old Feb 6, 2010, 01:54 PM
Mark_
 
29 posts · Feb 2010
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
  #32  
Old Feb 6, 2010, 02:04 PM
Mark_
 
29 posts · Feb 2010
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


Last edited by Mark_; Feb 6, 2010 at 02:08 PM.
  #33  
Old Feb 6, 2010, 04:02 PM
juggledad's Avatar
juggledad
 
23,765 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
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.
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #34  
Old Feb 7, 2010, 08:36 AM
PortMaria.62's Avatar
PortMaria.62
 
19 posts · Dec 2009
wyoming
thank you juggledad. I think we can close this one.
  #35  
Old Mar 26, 2010, 12:02 PM
nick51
 
54 posts · Oct 2009
Quote:
Originally Posted by PortMaria.62
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.
  #36  
Old Apr 5, 2010, 11:18 PM
arothafel
 
19 posts · Mar 2010
Wow... This is very cool. Where would I add in js.php
HTML Code:
<div align=center>
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

Last edited by arothafel; Apr 5, 2010 at 11:20 PM.
  #37  
Old Apr 6, 2010, 07:33 AM
juggledad's Avatar
juggledad
 
23,765 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
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
__________________
"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; Apr 28, 2010 at 05:47 AM.
  #38  
Old Apr 6, 2010, 07:46 AM
arothafel
 
19 posts · Mar 2010
Thank you Juggledad

You're correct... as usual.. Stupid me! Thanks for the help. Donation has been forwarded with more to come, no doubt.
  #39  
Old Apr 27, 2010, 11:47 PM
emanuel1969's Avatar
emanuel1969
 
133 posts · Apr 2010
California
Send a message via Skype™ to emanuel1969
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
  #40  
Old Apr 28, 2010, 01:20 AM
emanuel1969's Avatar
emanuel1969
 
133 posts · Apr 2010
California
Send a message via Skype™ to emanuel1969
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!
  #41  
Old Apr 28, 2010, 08:41 PM
emanuel1969's Avatar
emanuel1969
 
133 posts · Apr 2010
California
Send a message via Skype™ to emanuel1969
Ok I got it to work. It would be helpful to newbies reading this to tell them they do NOT need to edit the header.php file. I read through this thread and thought that both steps were needed. All you need to do is edit the js.php file, put more than one image in your images/header directory, and set the number of seconds in you want to rotate them in the Ata theme options.

This is great you guys. Thanks!
  #42  
Old Apr 29, 2010, 07:34 AM
juggledad's Avatar
juggledad
 
23,765 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
I'm closing this thread - the explaination has been moved to 'HOWTO: create fading header images ' (http://forum.bytesforall.com/showthread.php?t=6921)
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support

Bookmarks

Tags
header images fade fading

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes


Similar Threads
Thread Thread Starter Forum Replies Last Post
Almost done - flash vs. images in header mcphoto Header configuration & styling 13 May 12, 2009 03:20 PM
header images PJK Header configuration & styling 1 Apr 11, 2009 05:53 PM
Header images + tagline ?? Photokitchen Header configuration & styling 3 Apr 9, 2009 01:25 PM
Header Images not showing eneitzel Header configuration & styling 4 Feb 24, 2009 01:20 PM
no header images kcd_2008 Header configuration & styling 1 Feb 17, 2009 06:16 PM


All times are GMT -6. The time now is 06:48 PM.


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