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.
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.
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.