Header image fade in fade out

  • I am using theme Twenty Eleven and WordPress version3.3.1 to make a web page for my company. I am using a Child Theme for all changes. Into my child theme I have copied the header.php, index.php, function.php from the parent.

    https://www.greenhillsoaps.com

    I want the header images to fade in and fade out. I have looked at most of the plugins and could not get what I needed. I have searched all the forum topics and posts remotely related to this topic. I have tried to find a timing function in the theme files, to no avail. I have been working on this for about five days and seem to have hit a wall. I am sure the answer is simple and more than obvious. However, it seems to evade my small and simple mind.

    I am new to the world of Word Press, HTML, CSS, JQuery, and Java Script. Despite this, I have found on the web a number of ways to achieve what I want, with varying degrees of simplicity. The best script I found was some Java Script and I have modified it to execute what I am trying to achieve. This works in HTML.

    Pastbin: https://pastebin.com/KueQ144M

    The code in the above file has three elements. First is the JS functions controlling the calling, fade in and fade out of each image. The second is the CSS which stacks the images on top of each other. The third is some HTML containing links to the images to be rotated.

    What I do not understand is where and how to post each segment of the attached code so when the web page is called up, the viewer will see the images in the header fade in and fade out as demonstrated.

    In the twenty eleven header.php there is a section of PHP that rotates the images when you change page or click on the header. It seems to be checking if there is a set header image. If not, then there are a few lines of code as follows:

    // Houston, we have a new header image!
echo get_image_fadein_fadeout( $post->ID, 'post-thumbnail' );
   else : ?>
     <img src="<?php header_image(); ?>" width="<?php echo HEADER_IMAGE_WIDTH; ?>" height="<?php echo HEADER_IMAGE_HEIGHT; ?>" alt="" />
  <?php endif; // end check for featured image or standard header ?>

	<?php endif; // end check for removed header image ?>

    This section is where the header images are selected and displayed. What is interesting is that the line above, beginning with <img src=”……” />, seems to refer back to the image file generated by the Header functions in the theme administrative panel.

    In a perfect world, I would love to be able to use that reference in my code, rather than having to manually reference the images. However, at my age, one does come to accept that the world is not perfect.

    I cannot tell you how frustrated I am, any advice would be helpful.

Viewing 15 replies - 1 through 15 (of 16 total)

  • Do not edit the Twenty Eleven theme. It is the default WordPress theme and having access to an unedited version of the theme is vital when dealing with a range of site issues. Create a child theme for your changes.

    Thread Starter FGoldwyn

    (@fgoldwyn)

    esmi,

    Thanks, I am using a child theme for all changes. I got that lesson when I figured out how to make drop down, horizontal sub menus.

    You can enqueue the javascript (using a no conflict wrapper) via your child’s functions.php file. The CSS can just e added to your child theme’s stylesheet. The HTML would (I assume) need to be added to the child’s header.php template file.

    Thread Starter FGoldwyn

    (@fgoldwyn)

    esmi,

    I think I have enequeue’d the java script and included the no conflict wrapper. In my child theme functions.php I begin with the following:

    /*
Theme Name: Twenty Eleven Child
Template: twentyeleven
*/

@import url("../twentyeleven/function.php");

wp_enqueue_script($image_fadein_fadeout);
function image_fadein_fadout() {
	<script type="text/javascript">
		//code by Jack Keller and found on www.icodesnippet.com
		$(document).ready(function(($){
			$(window).load(function() { 	//start after HTML, images have loaded
				var InfiniteRotator = .........

    And my code ends as follows:

    ...........InfiniteRotator.init();
			});
		});
		</script>
}
add_action( 'wp_enqueue_scripts', 'image_fadein_fadeout' );

    Why is it that I think I need to add a line of code in my header.php to call the function into that file?
    How do I put in the HTML? Do I create a link to another file? I do not think I can have a DIV in my header.php.

    Any thoughts?

    No – you are not enqueuing the script correctly. You need to use something like:

    function my_scripts_method() {
    wp_register_script( 'fade',  get_template_directory_uri() . '/my-script.js');
    wp_enqueue_script( 'fade' );
}
if (!is_admin() ) add_action('wp_enqueue_scripts', 'my_scripts_method');

    in your theme’s functions.php file where my-script.js is the name of the (wrapped) script.

    Thread Starter FGoldwyn

    (@fgoldwyn)

    esmi,

    Here is my engueuing:

    // header image fadein fade out function

function my_scripts_method() {
    wp_register_script( 'image_fadein_fadout',  get_template_directory_uri() . '/wp-content/themes/twentyeleven-child/js/image_fadein_fadeout.js');
    wp_enqueue_script( 'image_fadein_fadout' );
}
if (!is_admin() ) add_action('wp_enqueue_scripts', 'my_scripts_method');

}
add_action( 'wp_enqueue_scripts', 'my_scripts_method' );

    I have also added a js file to my js folder in my child theme called image_fadein_fadeout.js. In this file I put the actual js function as you indicated I need to refer the entry in the functions.php to that js file.

    In my header.php, two lines below the start of the head section I added:

    <script type="text/javascript" src="www.greenhillsoaps/wp-content/themes/twentyeleven-child/js/image_fadein_fadeout.js"></script>

    In the <body> I added a <div> containing all the image files:

    <a href="<?php echo esc_url( home_url( '/' ) ); ?>">
				<?php
					// The header image
					// Check if this is a post or page, if it has a thumbnail, and if it's a big one
					if ( is_singular() &&
							has_post_thumbnail( $post->ID ) &&
							( /* $src, $width, $height */ $image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), array( HEADER_IMAGE_WIDTH, HEADER_IMAGE_WIDTH ) ) ) &&
							$image[1] >= HEADER_IMAGE_WIDTH ) :
						// Houston, we have a new header image!
						?>
						<?php endif; // end check for featured image or standard header ?>

						<div id="rotating-item-wrapper">
							<img class="rotating-item" src="https://greenhillsoaps.com/wp-content/uploads/2012/01/cropped-iStock_000017900426Large.jpg" alt=""/>
							<img class="rotating-item" src="https://greenhillsoaps.com/wp-content/uploads/2012/01/cropped-iStock_000018253040Medium.jpg" alt=""/>
							<img class="rotating-item" src="https://greenhillsoaps.com/wp-content/uploads/2012/01/cropped-iStock_000005274216Medium.jpg" alt=""/>
							<img class="rotating-item" src="https://greenhillsoaps.com/wp-content/uploads/2012/01/cropped-iStock_000005576609Medium.jpg" alt=""/>
							<img class="rotating-item" src="https://greenhillsoaps.com/wp-content/uploads/2012/01/cropped-iStock_000004795672Medium.jpg" alt=""/>
							<img class="rotating-item" src="https://greenhillsoaps.com/wp-content/uploads/2012/01/cropped-iStock_000014561712Medium.jpg" alt=""/>
						</div>

			</a>

    This is in the a href section as that is where firebug indicates the images are pulled to on the page. Please also note, that there is a PHP that checks the kind of post or page and the size of the images. I left this alone.

    Lastly, the CSS is in the style sheet and is as shown above.

    If you look at the website (www.greenhillsoaps.com) you will see that the images are being pulled in, but they are not fading or being stacked as ordered in the style sheet.

    What the @%$^@?!! am I doing wrong. Even my dog is starting to look at me like I’m some kind of idiot!

    Just so you know, your help is greatly appreciated!

    Thread Starter FGoldwyn

    (@fgoldwyn)

    I have worked on this again all day.

    I put the html in the header.php contained within a DIV. The DIV was in an anchor “a href” and my research indicated that I cannot have a div within an a href. Further, the research indicates I do not need a div as the a href can act in the same way as a div for referencing the element. So I removed the div and left the img.rotating-image bound within the a href.

    Secondly, I cleaned up and removed repetition in the js file.

    I also corrected the link reference to the js file in the header.php.

    Yet, still no success!

    When I refresh the page, and watch the code execute in firebug, what happens is that when the body div is reached, there is an onclick element that executes and then everything stops.

    I cannot find where the element is located. I did find stWidget in the footer, but not the code initiating the onclick.

    I am not sure what is happening here. If the onclick is stoping the js function from running, then, that is one problem. However, that should not prevent the page from accessing the child theme style sheet. And it appears the child theme style sheet is not being accessed or used. I wonder why.

    I am certain there is something I have missed or not understood, probably a lot, but I would like to understand what I am doing wrong.

    Thanks!

    src=”www.greenhillsoaps/wp-content/… obviously isn’t a valid URL since it’s missing a top-level domain, i.e. .com. And you don’t need it in your header.php, since you add the script with wp_enqueue_script. And you also don’t have to call add_action( 'wp_enqueue_scripts', 'my_scripts_method' ); twice in your functions.php.

    Secondly, since you’re using a child theme you should probably use get_stylesheet_directory_uri() instead of get_template_directory_uri(). get_template_directory_uri() will point to a parent directory. So, ether prepend -child yourself, like here:

    wp_register_script( 'image_fadein_fadout', get_template_directory_uri() . '-child/js/image_fadein_fadeout.js');

    or use get_stylesheet_directory_uri(), like here:

    wp_register_script( 'image_fadein_fadout', get_stylesheet_directory_uri() . '/js/image_fadein_fadeout.js');

    Thread Starter FGoldwyn

    (@fgoldwyn)

    Andrei,

    Thank you for taking the time to comment and advise.

    The site url is: https://www.greenhillsoaps.com

    Yesterday I ran a link check through W3C and found that the link I had in the header.php to the functions.php was not right. W3C suggested deleting the link in the header.php which I did.

    I also worked on trying to figure out why the function was not loading and running when I went to the site. After cleaning up some CSS issues, it still did not work.

    In my functions.php my code looks as follows:

    <?php
function my_script_method() {
    wp_register_script( 'image_fadein_fadout',  get_template_directory_uri() . '/wp-content/themes/twentyeleven-child/js/image_fadein_fadeout.js');
    wp_enqueue_script( 'image_fadein_fadout' );
}
if( is_page_template ( 'header.php' ) ) {
	add_action('wp_enqueue_scripts', 'my_scripts_method');
}
?>

    The code for the image_fadein_fadeout is as follows:

    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js?ver=3.0.1">
</script>
	<script type="text/javascript">
	//code by Jack Keller and found on www.icodesnippet.com
	$(document).ready(function($){

		$(window).load(function() { 	//start after HTML, images have loaded
			var InfiniteRotator =
			{
			init: function()
			{
				//initial fade-in time (in milliseconds)
				var initialFadeIn = 1000;

				//interval between items (in milliseconds)
				var itemInterval = 5000;

				//cross-fade time (in milliseconds)
				var fadeTime = 2500;

				//count number of items
				var numberOfItems = $('.rotating-item').length;

				//set current item
				var currentItem = 0;

				//show first item
				$('.rotating-item').eq(currentItem).fadeIn(initialFadeIn);

				//loop through the items
				var infiniteLoop = setInterval(function(){
					$('.rotating-item').eq(currentItem).fadeOut(fadeTime);
					if(currentItem == numberOfItems -1){
					currentItem = 0;
					}else{
					currentItem++;
					}
					$('.rotating-item').eq(currentItem).fadeIn(fadeTime);
				}, itemInterval);
			}
			};
			InfiniteRotator.init();
		});
	});
</script>

    When I cleaned up the CSS I was able to get the images to stack correctly. I was not able to get them to fade in and fade out. Watching the page load in firebug, I could see in the body div of the page there is some inline code calling for onclick. When the page loads, this code is executed and the page never gets beyond that to run the fadein fadeout.

    As someone new to all this, I am not at all sure how to correct this.

    Again, thank you very much for your guidance.

    You are not doing it right.

    1) get_template_directory_uri() will return parent theme URI, so get_template_directory_uri() . '/wp-content/themes/twentyeleven-child/js/image_fadein_fadeout.js' will give you https://greenhillsoaps.com/wp-content/themes/twentyeleven/wp-content/themes/twentyeleven-child/js/image_fadein_fadeout.js, which as you can see is incorrect URL.
    2) That if check for add_action you have bellow doesn’t make sense.
    3) callback and function you try to add have different names, i.e. function name is missing ‘s’ or, if you look at it from the different angle, callback has an extra ‘s’.

    Just replace that code with this one:

    <?php
function my_scripts_method() {
    wp_register_script( 'image_fadein_fadout', get_stylesheet_directory_uri()  . '/js/image_fadein_fadeout.js');
    wp_enqueue_script( 'image_fadein_fadout' );
}
if( !is_admin() ) add_action( 'wp_enqueue_scripts', 'my_scripts_method' );
?>
    Thread Starter FGoldwyn

    (@fgoldwyn)

    Andrei,

    I made your change. I replaced my code in functions.php with your code. Saved the changed file. Reloaded the page. It appears that the onclick inline function is overriding the functions.php.

    Here is the line in the body class

    <head>
<body class="archive tax-wpsc_product_category term-spa-soaps term-20 logged-in admin-bar single-author one-column content" onclick="if(stWidget.buttonClicked==false){stWidget.stopClosing=false;stWidget.openDuration=0;stWidget.stClose(100);}">
<div id="page" class="hfeed">
<header id="branding" role="banner">

    What happens when the page loads, is that I can see it tracking down to body class and then track through this code. Then things stop.

    You do not have image_fadein_fadeout.js inside <head> tag, which indicates that you still haven’t added the script properly.

    Secondly, your image_fadein_fadeout.js also needs to be fixed.
    1) get rid of all the <script> tags, so your first line is $(document).ready(function($){ and your last is });.
    2) when you’ve done that, change your now first line to jQuery(document).ready(function($){ (in other words replace the first $ sign with jQuery).

    PS: If you’re still unsuccessful adding your javascript with wp_enqueue_script upload functions.php and header.php to pastebin, I’ll take a look.

    Thread Starter FGoldwyn

    (@fgoldwyn)

    Andrei,

    You are a gentleman for offering to take a look. Thank you for your time.
    the function.php is in pastbin:

    https://pastebin.com/qxXpCyVr

    I named this in pastbin as GHSfunction.php – this is only for pastbin.

    The header.php is in pastbin:

    https://pastebin.com/kUFM16hr

    I named this in pastbin as GHSheader.php – this is only for pastbin.

    A few comments. First, at no time have I been able to get the image_fadein_fadeout.js to register in the head section of the header.

    Secondly, if you load the web site, then refresh the page with Ctl+F5 you will see the images scroll through very fast right when the page reloads.

    Third, if reload the page again and watch in firebug, you will see the execution of the following code in the body section:

    <body class="home page page-id-34 page-template-default logged-in admin-bar single-author singular one-column content" onclick="if(stWidget.buttonClicked==false){stWidget.stopClosing=false;stWidget.openDuration=0;stWidget.stClose(100);}">

    This code runs and then the images stop.

    You can also look at an html file of the fadein fade out code at the following:

    https://pastebin.com/KueQ144M

    with this, you can verify the JS, HTML, and CSS.

    I must say, I am at a total loss as to why the enqueue’d script is not registering. I did find one article that said that there needs to be an enqueue activation in the header page above the title section. However, I also found numerous articles saying that enqueue is already activated in twenty eleven.

    Lastly, if it turns out that the onclick incline code is the problem, I want to be careful about universally turning it off. There are other pages of the site where clicking on images to enlarge them is important.

    Your help and assistance is greatly appreciated. I will be around tomorrow (Saturday) working –

    A few comments. First, at no time have I been able to get the image_fadein_fadeout.js to register in the head section of the header.

    Which means the script hasn’t been added properly.

    Secondly, if you load the web site, then refresh the page with Ctl+F5 you will see the images scroll through very fast right when the page reloads.

    Third, if reload the page again and watch in firebug, you will see the execution of the following code in the body section

    Both have nothing to do with your problem. The last one has to do with Share This button, so it’s plugin related.

    Anyway, back to the code…

    header.php:

    Looks okay to me, except for the fact that you try to add image_fadein_fadout script twice (pastebin header.php line 53 and functions.php line 6). So, the lines 52-53 need to go.

    Personally, I would have also moved those wp_enqueue_script lines (jquery, comment-reply) to functions.php, just to keep them one place. But it’s something that you can do later, after you get it working.

    functions.php:

    Move “// header image fadein fade out function” bellow <?php, otherwise this line will be added to your HTML before the doctype. Remove the white-spaces too, so that the first line starts with <?php.

    The file looks fine otherwise and it should work. So, the next questions are:

    1) I’ve noticed you called it function.php in your post above, it should be functions.php (note the s letter). So, are you sure you named the file correctly?
    2) In case it is named as it should have been, are you sure you have uploaded it correctly?

    Thread Starter FGoldwyn

    (@fgoldwyn)

    Andrei,

    The below changes were made to the files in my child theme.

    I removed the enqueue from line 52 of the header.php.

    I moved the “//Header image fadein fade out” to below the initial <?php in the “function” file.

    I reloaded the page – no change and the function was not loading.

    I checked the spelling of the “function” file and added the “s”. Changing the name of the file from function.php to functions.php.

    I reloaded the page.

    At first there was no change. So I watched in fire bug. The script was running through the images and ending each image with “display: none”.

    Then I saw the script beginning to run again. This time it was running correctly.

    Take a look and let me know what you think!

    https://www.greenhillsoaps.com

    Thank you very much. I hope the rest of the wordpress community appreciates your efforts here as much as I do.

    As always, your thoughts, comments, advice and suggestions are warmly welcome.

Viewing 15 replies - 1 through 15 (of 16 total)
  • The topic ‘Header image fade in fade out’ is closed to new replies.