jCarousel初始化的问题

时间:2011-06-07 16:19:40

标签: jquery wordpress initialization jcarousel

我曾经有一个jCarousel的图像在我的Wordpress页面的标题中工作得非常好。现在添加一些代码以根据正在显示的类别页面更改页面标题后,它无法正常工作。似乎没有初始化并用正确的代码包装html中的图像列表以使列表进入jCarousel。加载页面时,显示旋转木马所在的所有内容都是页面下方的图像列表,包括项目符号和所有内容。奇怪的是,即使我删除了我在旋转木马上方添加的PHP if语句,它也会做同样的事情而仍然拒绝工作。我没有看到任何我意外添加的流氓代码打破了旋转木马。我正在使用的wordpress头文件如下。对不起,如果它的一部分有点乱...有没有人也知道如何在这里粘贴代码而不搞乱它?我基本上不得不在代码的每一行之前手动放置4个空格,以使其显得有些合理。

<?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">

2 个答案:

答案 0 :(得分:1)

替换

<script type="text/javascript' src='js/jquery.jcarousel.js"></script>

<script type="text/javascript" src="js/jquery.jcarousel.js"></script>

报价不匹配!

答案 1 :(得分:1)

您的jCarousel中包含单引号和双引号的问题包括......

你有这个......

<script type="text/javascript' src='js/jquery.jcarousel.js"></script>

你需要这个......

<script type="text/javascript" src="js/jquery.jcarousel.js"></script>