• Resolved lakki68

    (@lakki68)


    I am trying to make my header images rotate. I tried wp-cycle which worked well with all browsers except firefox. Gave that up and downloaded JS banner rotate. The images do not rotate and overlap the navigation menu in Firefox. The images double up in IE and still do not rotate. I am using the twenty eleven theme.
    I am really frustrated. Please help!!

Viewing 6 replies - 1 through 6 (of 6 total)
  • It’s always easier to help fix a site we can actually see …

    Thread Starter lakki68

    (@lakki68)

    [ Moderator Note: Please post code or markup snippets between backticks or use the code button. Or better still – use the pastebin ]

    Here is the website https://rural-development.ca/wordpress/ . I managed to get the images to rotate, but the alignment of the menu is disturbed. I removed the header image from the theme and used the jsbanner rotate function in header.php. Here is the code from header.php.

    <?php
    /**
     * The Header for our theme.
     *
     * Displays all of the <head> section and everything up till <div id="main">
     *
     * @package WordPress
     * @subpackage Twenty_Eleven
     * @since Twenty Eleven 1.0
     */
    ?><!DOCTYPE html>
    <!--[if IE 6]>
    <html id="ie6" <?php language_attributes(); ?>>
    <![endif]-->
    <!--[if IE 7]>
    <html id="ie7" <?php language_attributes(); ?>>
    <![endif]-->
    <!--[if IE 8]>
    <html id="ie8" <?php language_attributes(); ?>>
    <![endif]-->
    <!--[if !(IE 6) | !(IE 7) | !(IE 8)  ]><!-->
    <html <?php language_attributes(); ?>>
    <!--<![endif]-->
    <head>
    <meta charset="<?php bloginfo( 'charset' ); ?>" />
    <meta name="viewport" content="width=device-width" />
    <title><?php
    	/*
    	 * Print the <title> tag based on what is being viewed.
    	 */
    	global $page, $paged;
    
    	wp_title( '|', true, 'right' );
    
    	// Add the blog name.
    	bloginfo( 'name' );
    
    	// Add the blog description for the home/front page.
    	$site_description = get_bloginfo( 'description', 'display' );
    	if ( $site_description && ( is_home() || is_front_page() ) )
    		echo " | $site_description";
    
    	// Add a page number if necessary:
    	if ( $paged >= 2 || $page >= 2 )
    		echo ' | ' . sprintf( __( 'Page %s', 'twentyeleven' ), max( $paged, $page ) );
    
    	?></title>
    <link rel="profile" href="https://gmpg.org/xfn/11" />
    <link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo( 'stylesheet_url' ); ?>" />
    <link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" />
    <!--[if lt IE 9]>
    <script src="<?php echo get_template_directory_uri(); ?>/js/html5.js" type="text/javascript"></script>
    <![endif]-->
    <?php
    	/* We add some JavaScript to pages with the comment form
    	 * to support sites with threaded comments (when in use).
    	 */
    	if ( is_singular() && get_option( 'thread_comments' ) )
    		wp_enqueue_script( 'comment-reply' );
    
    	/* Always have wp_head() just before the closing </head>
    	 * tag of your theme, or you will break many plugins, which
    	 * generally use this hook to add elements to <head> such
    	 * as styles, scripts, and meta tags.
    	 */
    	wp_head();
    
    ?>
    </head>
    <body <?php body_class(); ?>>
    <div id="page" class="hfeed">
    	<header id="branding" role="banner">
    
    			<hgroup>
    <img class="logo-image" src="https://rural-development.ca/wordpress/wp-content/uploads/logo.jpg"/>
    <h1 id="site-title"><span><a>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></span></h1>
    <h2 id="site-description"><?php bloginfo( 'description' ); ?></h2>
    </hgroup>
    
    			<?php
    				// Check to see if the header image has been removed
    
    				$header_image = get_header_image();?>
    
    				<?php if ( ! empty( $header_image ) ) :
    			?>
    			<a>">
    
    					<?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!
    						echo get_the_post_thumbnail( $post->ID, 'post-thumbnail' );
     					else : ?>
    
    					<!--<img src="<?php header_image(); ?>" width="<?php echo HEADER_IMAGE_WIDTH; ?>" height="<?php echo HEADER_IMAGE_HEIGHT; ?>" alt="" />-->
    
    					<?//php wp_cycle(); ?>
    
    				<?php endif; // end check for featured image or standard header ?>
    			</a>
    			<?php
                               else :
     jsbrotate('images=https://rural-development.ca/wordpress/wp-content/uploads/banner/newbanner.jpg|https://rural-development.ca/wordpress/wp-content/uploads/banner/motto_banner.jpg|https://rural-development.ca/wordpress/wp-content/uploads/banner/swamijis_banner1.jpg&height=288&width=1000&imgdisp=8&imgfade=4');
    endif; // end check for removed header image ?>
    
    			<?php
    				// Has the text been hidden?
    				if ( 'blank' == get_header_textcolor() ) :
    			?>
    				<div class="only-search<?php if ( ! empty( $header_image ) ) : ?> with-image<?php endif; ?>">
    				<?php get_search_form(); ?>
    				</div>
    			<?php
    				else :
    			?>
    				<?php get_search_form(); ?>
    			<?php endif; ?>
    
    			<nav id="access" role="navigation">
    				<h3 class="assistive-text"><?php _e( 'Main menu', 'twentyeleven' ); ?></h3>
    				<?php /*  Allow screen readers / text browsers to skip the navigation menu and get right to the good stuff. */ ?>
    				<div class="skip-link"><a href="#content">"><?php _e( 'Skip to primary content', 'twentyeleven' ); ?></a></div>
    				<div class="skip-link"><a href="#secondary">"><?php _e( 'Skip to secondary content', 'twentyeleven' ); ?></a></div>
    				<?php /* Our navigation menu.  If one isn't filled out, wp_nav_menu falls back to wp_page_menu. The menu assiged to the primary position is the one used. If none is assigned, the menu with the lowest ID is used. */ ?>
    				<?php wp_nav_menu( array( 'theme_location' => 'primary' ) ); ?>
    			</nav><!-- #access -->
    	</header><!-- #branding -->
    
    	<div id="main">

    I also did some experimentation with other plugins that have been commented.

    I just loaded your site in Firefox, IE, and Chrome, and the banner is working just fine … no double images, no overlap. So, what is the issue?

    Thread Starter lakki68

    (@lakki68)

    Sorry about the confusion. I was just playing around with the other plugin that did not work and eventually worked(which was what you saw).

    I reactivated jsbanner and commented out lines that called the other plugin. The navigation menu has a black background and should appear at the bottom of the banner. Same code as above.

    I see the images rotating just fine here … not sure what you’re seeing.

    But the navigation alignment issue is, admittedly, quite strange.

    Add this code to the bottom of your theme’s stylesheet and it should fix the issue (at least in my debugger it worked just fine):

    #access {
      margin-top: 48px;
    }
    Thread Starter lakki68

    (@lakki68)

    Thanks a lot! This worked perfectly!

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘JS Banner Rotate’ is closed to new replies.