Problem with jCarousel initialization
I used to have a jCarousel of image that worked perfectly fine in the header of my Wordpress pages. Now after adding some code to change the header of the pages based on the category page that is being displayed, it is not working correctly. It seems that is not getting initialized and wrapping the list of images in the html with the correct code to make the list into the jCarousel. When the page is loaded, all that is shown where the carousel is supposed to be is a list of the images going down the page, with bullets and everything. The strange part is that even when I remove the PHP if statements that I added right above the carousel, it does the same thing and still refuses to work. I don't see any rogue code that I accidentally added that is breaking the carousel. The wordpress header file that I'm working with is below. Sorry if parts of it are a bit messy...does anyone also know how to paste code on here without messing it up? I basically had to manually put 4 spaces before each line of the code to get it to show up somewhat reasonably.
<?php
/**
* The Header for our theme.
*
* Displays all of the <head> section and everything up till <div id="main">
*
* @package WordPress
* @subpackage Twenty_Ten
* @since Twenty Ten 1.0
*/
?><!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>" />
<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', 'twentyten' ), max( $paged, $page ) );
?></title>
<script type="text/javascript" src="js/jquery-1.6.1.min.js"></script>
<script type="text/javascript' src='js/jquery.jcarousel.js"></script>
<link rel="stylesheet" type="text/css" href="css/skin.css" />
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery('#mycarousel').jcarousel();
});
</script>
<link rel="profile" href="http://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' ); ?>" />
<?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="wrapper" class="hfeed">
<div id="header">
<div id="masthead">
<div id="logo"><a href="http://cayennecreative.com/testing"><img src="images/cayennelogo.png" alt="Cayenne" /></a> <div id="social"><a href="<?php bloginfo('rss2_url'); ?>"><img src="images/1.png" alt="Cayenne's RSS Feed" /></a><br /><a href="http://twitter.com/CayenneCreative"><img src="images/2.png" alt="Cayenne on Twitter" /></a><br /><a href="http://www.facebook.com/CayenneCreative"><img src="images/3.png" alt="Cayenne on Facebook" /></a><br /><a href="http://www.linkedin.com/company/cayenne-creative"><img src="images/4.png" alt="Cayenne on LinkedIn" /></a></div></div>
<div id="access" role="navigation">
<?php /* Allow screen readers / text browsers to skip the navigation menu and get right to the good stuff */ ?>
<div class="skip-link screen-reader-text"><a href="#content" title="<?php esc_attr_e( 'Skip to content', 'twentyten' ); ?>"><?php _e( 'Skip to content', 'twentyten' ); ?></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( 'container_class' => 'menu-header', 'theme_location' => 'primary' ) ); ?>
<div id="contactinfo">
P: 205.322.4422 E: info@cayennecreative.com
</div>
</div><!-- #access -->
<div id="branding" role="banner">
<?php if(is_category(3)): ?>
<div id="header1">Hey image slider</div>
<div id="header2">You Need to Work</div>
<?php elseif(is_category(8)): ?>
<div id="header3">Great Work</div>
<div id="header4">is done by people who are not afraid to be great.</div>
<?php elseif(is_category(6)): ?>
<div id="header5">The People</div>
<?php elseif(is_category(9)): ?>
<div id="header1">We solve problems</div>
<开发者_开发知识库;div id="header2">With Style</div>
<?php elseif(is_category(7)): ?>
<div id="header1">Change happens by listening and then starting a</div>
<div id="header2">Dialogue</div>
<?php else: ?>
<div id="header1">We solve problems</div>
<div id="header2">With Style</div>
<?php endif; ?>
<div id="carousel-shadow"></div>
<ul id="mycarousel" class="jcarousel-skin-tango">
<li><a href="images/1large.jpg" title=""><img src="images/1.jpg"alt="" /></a></li>
<li><a href="images/2large.jpg" title=""><img src="images/2.jpg"alt="" /></a></li>
<li><a href="images/3large.jpg" title=""><img src="images/3.jpg"alt="" /></a></li>
<li><a href="images/4large.jpg" title=""><img src="images/4.jpg"alt="" /></a></li>
<li><a href="images/5large.jpg" title=""><img src="images/5.jpg"alt="" /></a></li>
<li><a href="images/6large.jpg" title=""><img src="images/6.jpg"alt="" /></a></li>
<li><a href="images/7large.jpg" title=""><img src="images/7.jpg"alt="" /></a></li>
<li><a href="images/8large.jpg" title=""><img src="images/8.jpg"alt="" /></a></li>
<li><a href="images/9large.jpg" title=""><img src="images/9.jpg"alt="" /></a></li>
<li><a href="images/11large.jpg" title=""><img src="images/11.jpg"alt="" /></a></li>
<li><a href="images/12large.jpg" title=""><img src="images/12.jpg"alt="" /></a></li>
<li><a href="images/13large.jpg" title=""><img src="images/13.jpg"alt="" /></a></li>
<li><a href="images/14large.jpg" title=""><img src="images/14.jpg"alt="" /></a></li>
<li><a href="images/15large.jpg" title=""><img src="images/15.jpg"alt="" /></a></li>
<li><a href="images/16large.jpg" title=""><img src="images/16.jpg"alt="" /></a></li>
<li><a href="images/20large.jpg" title=""><img src="images/20.jpg"alt="" /></a></li>
<li><a href="images/18large.jpg" title=""><img src="images/18.jpg"alt="" /></a></li>
<li><a href="images/19large.jpg" title=""><img src="images/19.jpg"alt="" /></a></li>
</ul>
</div>
</div><!-- #masthead -->
</div><!-- #header -->
<div id="main">
You have an issue with single and double quotes in your jCarousel Includes...
You have this...
<script type="text/javascript' src='js/jquery.jcarousel.js"></script>
You need to have this...
<script type="text/javascript" src="js/jquery.jcarousel.js"></script>
Replace
<script type="text/javascript' src='js/jquery.jcarousel.js"></script>
with
<script type="text/javascript" src="js/jquery.jcarousel.js"></script>
Mismatched quotes!
加载中,请稍侯......
精彩评论